CSS 한 줄 또는 여러 줄 수직 정렬

Question 1

하나 이상의 줄을 포함 할 수있는 제목이 있습니다.

텍스트를 세로로 정렬하려면 어떻게합니까? 항상 한 줄이면 줄 높이를 컨테이너 높이로 설정할 수 있습니다.

JavaScript를 사용하여 할 수 있지만별로 마음에 들지 않고 순수한 CSS 방식을 찾고 있습니다.

또한 컨테이너가 선으로 확장 될 수 있다면 완벽 할 것이므로 항상 상단과 하단에 동일한 패딩을 사용할 수 있습니다.

여기에 이미지 설명 입력

Question 2

이를 위해 display:table-cell속성 을 사용할 수 있습니다 .

.inline {
  display: inline-block;
  margin: 1em;
}
.wrap {
  display: table;
  height:  100px;
  width:   160px;
  padding: 10px;
  border:  thin solid darkgray;
}
.wrap p {
  display:        table-cell;
  vertical-align: middle;
}

<div class="inline">
  <div class="wrap">
    <p>Example of single line.</p>
  </div>
</div>

<div class="inline">
  <div class="wrap">
    <p>To look best, text should really be centered inside.</p>
  </div>
</div>

스 니펫 확장

그러나 IE8 이상에서 작동합니다. 자세한 정보는이 기사를 읽어보십시오 : CSS 트릭 : 세로로 가운데 여러 줄 텍스트 .

Question 3

당신이 마음에 들지 않으면 display:table트릭 여기없는 솔루션입니다 (내가하지 알고) :

.cen {
  min-height:5em; width:12em; background:red; margin:1em 0;
}
.cen p {
  display:inline-block; vertical-align:middle;
  margin:0 0 0 1em; width:10em;
}
.cen::after {
   display:inline-block; vertical-align:middle; line-height:5em;
   width:0; content:"\00A0"; overflow:hidden;
}

HTML로

<div class="cen">
 <p>Text in div 1</p>
</div>

이것은 내용이 더 높지 않으면 div에 5em의 높이를 제공합니다. 여기에
라이브 예제 .

편집 : 오, 어떤 브라우저에서 작동해야합니까? IE8은 협력하지 않습니다.

(나중에 편집 : Chrome에서 문제를 처리하도록 CSS 업데이트)

Question 4

이 솔루션이 정말 마음에 듭니다.

<div>
    <span style="display: inline-block; vertical-align: middle; height: --The height of your box here--"></span>
    <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here</span>
</div>

스타일 시트를 자유롭게 사용하고 높이에 100 %를 사용하십시오.

또한 인라인 블록이므로 span 태그 사이에 공백을 주석 처리해야 할 수도 있습니다.

신용은 하데스 에게 간다 . 나는 여기 에서 그것을 얻었다

<div style="outline:thin solid red;">
  <span style="display: inline-block; vertical-align: middle; height: 60px;"></span>
  <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here.</span>
</div>

<div style="outline:thin solid red;">
  <span style="display: inline-block; vertical-align: middle; height: 60px;"></span>
  <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here. Put your multi-line content here. Put your multi-line content here. Put your multi-line content here. Put your multi-line content here.</span>
</div>

스 니펫 확장

참고 : 이것은 여러 줄 콘텐츠에서 작동하지 않는 것 같습니다 .

Question 5

대신에 사용하는 vertical-align: center그리고 display: table-cell, 당신은라는 새로운 방법을 살펴 걸릴 수도 있습니다 CSS 디스플레이 플렉스 훨씬 간단합니다

.box {
    width: 200px;
    height: 50px; 
    padding: 10px;
    margin-bottom: 20px;
    background-color: red;
    
    /* Only add these 2 lines */
    display: flex;
    align-items: center;
  }

<div class="box">Lorem ipsum dolor</div>
<div class="box">Lorem ipsum dolor sit amet ipsum dolor</div>

스 니펫 확장

Question 6

이와 같은 것

HTML

<div>
    <p>
       Lorem Ipsum is simply
    </p>
</div>

CSS

div {
   display: table;
}
p {
   display:table-cell;
   vertical-align: middle;
}

Question 7

텍스트가 반응하도록하려면 너비가 동적으로 변경됨에 따라 단어를 한 줄에서 여러 줄로 줄 바꿈하는 것은 위에서 언급 한 inline-block도우미 (여기에서 최고의 호환성을 가짐)를 사용하여 .inlinehelper줄 바꿈하는 것만으로 는 충분하지 않을 수 있습니다 .
다음은 이러한 simpel 작업을위한 완전한 솔루션입니다.

HTML :

<div id="responsive_wrap">
    <span class="inlinehelper"><span id="content">        
</div>

CSS :

#responsive_wrap {   
   display: block;    
   height: 100%; //dimensions just for   
   width: 100%;  //example's sake
   white-space: nowrap;
}

#content {   
   display: inline-block;        
   white-space: initial;
}

.inlinehelper {
   height: 100%;    
   width: 0;
   vertical-align: middle;
   display: inline-block;
}

서로 white-space:nowrap를 방지 .inlinehelper하고 #content감싸는 속성에 주목 하십시오 . white-space:initial에 #content대한 랩으로 다시 능력 span자체;

또 다른 옵션 : 개인적인 취향의 문제입니다. 대신 의사 요소를 사용할 수 있습니다 .inlinehelper. .inlinehelperCSS 규칙과 요소를 제거 하고이 가상 요소 CSS 선택자를 추가합니다.

#responsive_wrap:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0px;
}

추신 :이 질문이 너무 늦었다는 것을 알았으므로이 답변을 누군가에게 도움이 될 것입니다.

Question 8

스타일링 현명한 경우, 표는 콘텐츠를 레이아웃하는 가장 좋은 방법입니다 (CSS에 스타일 태그를 넣습니다).

<table style="border:1;collapse;width:300px;padding:5px;background-color:red;">
<tr>
    <td style="width:250px;vertical-align:middle;">Lorem ipsum dolor sit amet ipswum dolor</td>
    <td style="width:50px;vertical-align:top;color:white;">1 Line</td>
</tr>

줄 수에는 JS 스크립트가 필요합니다. 여기를보세요.

http://www.webdeveloper.com/forum/archive/index.php/t-44333.html

Question 9

나는 그런 종류의 해결책을 좋아합니다. 나는 stackoverflow 에서이 트릭을 어딘가에서 보았지만 정확히 어디에 있는지 기억하지 못합니다. 매우 유 스펠! :)

ul {
background: #000; 
  padding-left: 0;
}
ul li {
  height: 130px;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-bottom: 3px solid #F7F7F7;
}
ul li:last-of-type {
  border-bottom: none;
}
ul li:after {
  color: #333;
  position: absolute;
  right: 35px;
  font-size: 40px;
  content: ">";
  top: 50%;
  margin-top: -24px;
  color: #FFDA00;
  -webkit-transition: 0.25s all ease;
  transition: 0.25s all ease;
}
ul li a {
  font-size: 35px;
  font-family: Arial;
  color: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-left: 40px;
  height: 100%;
  line-height: 38px;
  display: inline-block;
  width: 100%;
  text-align: left;
  text-decoration: none;
}
ul li a:before {
  display: inline-block;
  vertical-align: middle;
  content: " ";
  height: 100%;
}
ul li a span {
  display: inline-block;
  vertical-align: middle;
}

<ul>
	<li class="dn">
		<a href="kapec.ru.php"><span> Lorem ipsum 1 LINE</span></a>
		</li>
		<li>
			<a href="varianti.ru.php"><span>Lorem ipsum <br> 2 lines </span></a>
		</li>

	</ul>

스 니펫 확장