Tôi có một tiêu đề có thể có một hoặc nhiều dòng.

Làm cách nào để căn chỉnh văn bản theo chiều dọc? Nếu nó luôn là một dòng, tôi chỉ có thể đặt chiều cao dòng thành chiều cao vùng chứa.

Tôi có thể làm điều đó bằng cách sử dụng JavaScript, nhưng tôi không thực sự thích nó, tôi đang tìm kiếm một cách thuần CSS.

Ngoài ra, nếu thùng chứa có thể mở rộng theo các đường thì sẽ rất hoàn hảo, vì vậy tôi luôn có thể có cùng một phần đệm ở trên và dưới.

Đối với điều này, bạn có thể sử dụng thuộc display:table-celltính:

.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>

Nhưng nó hoạt động IE8 trở lên. Đọc bài viết này để biết thêm thông tin: Thủ thuật CSS: Văn bản nhiều dòng có tâm theo chiều dọc .

Nếu bạn không thích display:tablethủ thuật này (tôi biết là không), đây là một giải pháp mà không cần nó:

.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;
}

với HTML

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

Điều này cung cấp cho div chiều cao là 5em, trừ khi nội dung lớn hơn, thì nó sẽ phát triển.
Ví dụ trực tiếp tại đây .

Chỉnh sửa: Ồ, trình duyệt này phải hoạt động trên những trình duyệt nào? IE8 sẽ không hợp tác.

(Chỉnh sửa sau: CSS được cập nhật để xử lý các sự cố trong Chrome)

Tôi thực sự thích giải pháp này:

<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>

Hãy thoải mái sử dụng các bảng định kiểu và 100% cho chiều cao ...

Cũng có thể phải nhận xét khoảng cách giữa các thẻ span, vì đây là các khối nội tuyến

Tín dụng thuộc về Hades . Tôi lấy nó từ đây

<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>

Lưu ý: Điều này dường như không hoạt động với nội dung nhiều dòng.

Thay vì sử dụng vertical-align: centervà display: table-cell, bạn có thể muốn xem xét phương pháp mới hơn được gọi là CSS display flex , đơn giản hơn NHIỀU

.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>

những thứ như thế này

HTML

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

CSS

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

Nếu Bạn muốn văn bản của mình phản hồi, việc gói các từ từ một đến nhiều dòng vì chiều rộng thay đổi động, thủ thuật được đề cập ở trên với trình inline-blocktrợ giúp (có khả năng tương thích tốt nhất ở đây) là không đủ, vì .inlinehelpercó thể đẩy văn bản xuống dưới chính nó.
Đây là giải pháp hoàn chỉnh cho một nhiệm vụ đơn giản như vậy:

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;
}

Chú ý đến thuộc white-space:nowraptính, thuộc tính ngăn cản .inlinehelpervà #contentbao bọc liên quan đến nhau. white-space:initialvề việc #contentđặt lại khả năng bọc cho spanchính nó;

Một lựa chọn khác: Thêm một vấn đề về sở thích cá nhân. Bạn có thể sử dụng một phần tử giả thay vì .inlinehelper. Loại bỏ các .inlinehelperquy tắc và phần tử css và thêm bộ chọn css phần tử giả này:

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

Tái bút: Tôi đã phát hiện ra rằng đây thực sự là một câu hỏi cũ quá muộn, vì vậy hãy để câu trả lời này, có thể nó sẽ hữu ích cho ai đó.

Tạo kiểu khôn ngoan, một bảng sẽ là cách tốt nhất để bố trí nội dung của bạn (đặt các thẻ kiểu trong 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>

Số dòng sẽ yêu cầu tập lệnh JS, hãy xem ở đây:

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

Tôi thích kiểu giải pháp đó. Tôi đã thấy ở đâu đó thủ thuật này trong stackoverflow nhưng không nhớ chính xác ở đâu. Rất hữu ích! :)

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>