div에서 요소를 세로로 정렬하는 방법은 무엇입니까? 옆에 수직으로 정렬되어야합니다. 이미지

두 개의 이미지와 div가 h1있습니다. 그들 모두는 div 내에서 서로 옆에 수직으로 정렬되어야합니다.

이미지 중 하나를 absolutediv 내에 배치 해야합니다 .

모든 공통 브라우저에서 작동하려면 CSS가 무엇입니까?

<div id="header">
    <img src=".." ></img>
    <h1>testing...</h1>
    <img src="..."></img>
</div>

답변

와우,이 문제는 인기가 있습니다. vertical-align재산 에 대한 오해에 근거하고 있습니다. 이 훌륭한 기사는 다음과 같이 설명합니다.

vertical-alignGavin Kistner의 “콘텐츠를 세로로 가운데 정렬 하는 방법” 이해

“CSS를 중심에 두는 방법” 은 다양한 상황에 필요한 CSS 중심 속성을 찾는 데 도움이되는 훌륭한 웹 도구입니다.

간단히 말해서 (그리고 링크 썩음 방지) :

  • 인라인 요소 (및 인라인 요소 만) 는를 통해 컨텍스트에서 세로로 정렬 될 수 있습니다 vertical-align: middle. 그러나 “컨텍스트”는 전체 상위 컨테이너 높이가 아니며 텍스트 행의 높이입니다. jsfiddle 예제
  • 블록 요소의 경우 수직 정렬이 어렵고 특정 상황에 따라 크게 달라집니다.
    • 내부 요소가있을 경우 고정 높이를 , 당신은 위치를 만들 수 있습니다 absolute및 지정 height, margin-top및 top위치. jsfiddle 예제
    • 중심 요소 가 한 줄로 구성 되고 부모 높이가 고정되어 있으면 컨테이너의 line-height높이를 채우도록 간단히 설정할 수 있습니다 . 이 방법은 내 경험에 매우 다양합니다. jsfiddle 예제
    • … 더 특별한 경우가 있습니다.

답변

flexbox 지원이 증가함에 따라 포함 요소에 적용된이 CSS는 포함 된 항목을 세로로 가운데에 배치합니다.

.container {
    display: flex;
    align-items: center;
}

Explorer 10 및 이전 (<4.4) Android 브라우저를 대상으로해야하는 경우 접두사 버전을 사용하십시오.

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

답변

이 매우 간단한 코드를 사용했습니다.

HTML :

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

CSS :

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

물론, 당신이 사용하는지 .class또는를 #id, 결과는 변경되지 않습니다.

답변

그것은 나를 위해 일했다 :

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}

답변

 .outer {
   display: flex;
   align-items: center;
   justify-content: center;
 }

답변

내 친구의 기술 :

HTML :

<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

CSS :

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}

여기 데모

답변

블록 요소를 중앙에 배치하려면 (IE9 이상에서 작동) 래퍼가 필요합니다 div.

.vcontainer {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}