하나에 두 개의 질문. 이게 처음이에요 ㅋㅋ
어쨌든 아시다시피 콘텐츠를 수직으로 중앙에 배치하는 것은 웹 사이트 개발에서 매우 고통 스럽습니다. 줄 높이 덕분에 div에서 한 줄의 텍스트를 중앙에 배치하는 방법을 이미 알고 있습니다. 그러나 내 문제는 div에서 두 줄 이상의 텍스트를 중앙에 배치하고 싶다는 것입니다.
누구든지 방법을 알고 있습니까? 나는 여기서 처음부터 시작하므로 불행히도 코드가 없습니다.
CSS display:table-cell방법
데모 : http://jsfiddle.net/eUfE3/
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
. Mauris tempus blandit egestas. Phasellus lacinia non lorem
hendrerit sagittis. Aenean iaculis sit amet erat sed feugia
t. Cras vulputate odio nec ultricies facilisis. Phasellus a
uctor commodo ligula nec tincidunt. In non leo facilisis p
urus hendrerit volutpat vitae at nunc
</div>
CSS
div { display:table-cell; vertical-align: middle; height:300px; }
최신 정보/
의견으로,이 div를 사용하여 레이아웃과 스타일 콘텐츠를 동시에 만드는 경우 이것을 사용하는 것은 킬러입니다.
다음은 레이아웃 div를 유지하고 div를 사용하여 콘텐츠를 표시 할 수있는 예입니다.
데모 : http://jsfiddle.net/sPG8j/2/
아마도 많은 솔루션 중 하나 일 수 있지만, 어쨌든 '콘텐츠 스타일링 div'를 '레이아웃 생성 div'에서 분리하는 것이 가장 간단하고 아마도 좋은 생각 일 것입니다 ... :? CMS 등 ..
최신 정보:
이것도 편리 할 수 있습니다 (jquery 속기 쉽게) (우리가 모든 내용을 살펴보고 다시 마크 업하고 싶지 않다고 가정하십시오)
$(".layout").wrapInner( "<div class='data'><div class='content'></div></div>" );
예제의 CSS
.data { display:table; height:100%; width:100%; }
.content { display:table-cell; vertical-align: middle; height:100%; }
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다