Văn bản căn chỉnh dọc CSS bên trong li

Tôi đang hiển thị số hộp trong một hàng với chiều cao và chiều rộng cố định, được tạo từ thẻ <li>. bây giờ tôi cần căn chỉnh văn bản ở trung tâm dọc. CSS vertical-align không có tác động, có lẽ tôi đang thiếu cái gì đó ???

Tôi không tìm kiếm các thủ thuật sử dụng (margin, padding, line-height), những thủ thuật này sẽ không hoạt động vì một số văn bản dài và sẽ bị ngắt thành hai dòng.

Vui lòng tìm mã thực tế:

Mã CSS

ul.catBlock{
  width:960px; 
  height: 270px; 
  border:1px solid #ccc; 
}

ul.catBlock li{
  list-style: none; 
  float:left; 
  display:block; 
  text-align: center; 
  width:160px; 
  height: 100px;
}

ul.catBlock li a{ 
  display: block;  
  padding: 30px 10px 5px 10px; 
  height:60px;
}

Mã HTML

<ul class="catBlock">
 <li><a href="#">IP Phone</a></li>
 <li><a href="#">Dual SIM Switch Server</a></li>
 <li><a href="#">IP PBX</a></li>
</ul>

Xác định display: tablephần tử gốc với vertical-align: middlevà chính phần tử với và display: table-cell.

line-heightlà cách bạn căn chỉnh văn bản theo chiều dọc. Nó khá chuẩn và tôi không coi đó là một "bản hack". Chỉ cần thêm line-height: 100pxvào của bạn ul.catBlock livà nó sẽ ổn.

Trong trường hợp này, bạn có thể phải thêm nó vào ul.catBlock li athay vì tất cả văn bản bên trong licũng nằm trong một a. Tôi đã thấy một số điều kỳ lạ xảy ra khi bạn làm điều này, vì vậy hãy thử cả hai và xem cái nào hiệu quả.

Tuy nhiên, phản hồi này có thể bị trễ nhiều năm, bất kỳ ai bắt gặp điều này có thể chỉ muốn thử

li {
    display: flex;
    flex-direction: row;
    align-items: center;
}

Hỗ trợ trình duyệt cho flexbox tốt hơn nhiều so với khi @scottjoudry đăng phản hồi của anh ấy ở trên, nhưng bạn vẫn có thể muốn xem xét tiền tố hoặc các tùy chọn khác nếu bạn đang cố gắng hỗ trợ các trình duyệt cũ hơn nhiều. caniuse: flex

Đáng ngạc nhiên là (hoặc không), vertical-aligncông cụ thực sự hoạt động tốt nhất cho công việc này. Hơn hết, không cần Javascript.

Trong ví dụ sau, tôi đang định vị outerlớp ở giữa phần thân và innerlớp ở giữa outerlớp.

Xem trước: http://jsfiddle.net/tLkSV/513/

HTML:

<div id="container">
    <span></span><div class="outer">
        <span></span><div class="inner">

        </div>
    </div>
</div>

CSS:

html, body {
    height: 100%;
    margin: 0;
    padding: 0; }
#container {
    text-align: center;
    height: 100%; }
span { 
    height: 100%;
    vertical-align: middle;
    display: inline-block; }
.outer {
    width: 100px;
    height: 200px;
    padding: 0;
    border: 1px solid #000;
    vertical-align: middle;
    display: inline-block; }
.inner {
    background: red;
    width: 30px;
    height: 20px;    
    vertical-align: middle;
    display: inline-block; }

Căn chỉnh dọc hoạt động bằng cách sắp xếp các tâm của các phần tử cạnh nhau. Áp dụng căn chỉnh theo chiều dọc cho một phần tử đơn lẻ hoàn toàn không có tác dụng gì. Nếu bạn thêm phần tử thứ hai không có chiều rộng nhưng là chiều cao của vùng chứa, phần tử đơn lẻ của bạn sẽ di chuyển đến tâm theo chiều dọc với phần tử không có chiều rộng này, do đó căn giữa nó theo chiều dọc. Yêu cầu duy nhất là bạn đặt cả hai phần tử thành nội tuyến (hoặc khối nội tuyến) và đặt thuộc tính căn chỉnh dọc của chúng thành vertical-align: middle.

Lưu ý: Bạn có thể nhận thấy trong mã của tôi bên dưới rằng <span>thẻ và thẻ của tôi <div>đang chạm vào. Bởi vì cả hai đều là phần tử nội tuyến, một khoảng trắng sẽ thực sự thêm một khoảng trắng giữa phần tử no-width và div của bạn, vì vậy hãy đảm bảo loại bỏ nó.

Trong tương lai, vấn đề này sẽ được giải quyết bằng flexbox. Ngay bây giờ, hỗ trợ trình duyệt là ảm đạm, nhưng nó được hỗ trợ ở dạng này hay dạng khác trong tất cả các trình duyệt hiện tại.

Hỗ trợ trình duyệt: http://caniuse.com/flexbox

.vertically_aligned {

    /* older webkit */
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-justify-content: center;

    /* older firefox */
    display: -moz-box;
    -moz-box-align: center;
    -moz-box-pack: center;

    /* IE10*/
    display: -ms-flexbox;
    -ms-flex-align: center;
    -ms-flex-pack: center;

    /* newer webkit */
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-box-pack: center;

    /* Standard Form - IE 11+, FF 22+, Chrome 29+, Opera 17+ */
    display: flex;
    align-items: center;
    justify-content: center;
}

Thông tin cơ bản về Flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Không có câu trả lời hoàn hảo nào được cung cấp ở đây ngoại trừ câu trả lời của Asaf không cung cấp bất kỳ mã nào cũng như bất kỳ ví dụ nào, vì vậy tôi muốn đóng góp ...

Inorder để vertical-align: middle;hoạt động, bạn cần sử dụng display: table;cho ulphần tử của mình và display: table-cell;cho licác phần tử và nhiều hơn bạn có thể sử dụng vertical-align: middle;cho licác phần tử.

Bạn không cần cung cấp bất kỳ rõ ràng margins, paddingsđể làm cho văn bản của bạn theo chiều dọc giữa.

Bản giới thiệu

ul.catBlock{
    display: table;
    width:960px; 
    height: 270px; 
    border:1px solid #ccc; 
}

ul.catBlock li {
    list-style: none;
    display: table-cell; 
    text-align: center; 
    width:160px; 
    vertical-align: middle;
}

ul.catBlock li a { 
    display: block;
}

Như đã giải thích ở đây: https://css-tricks.com/centering-in-the-unknown/ .

Như đã được thử nghiệm trong thực tế, giải pháp đáng tin cậy nhưng thanh lịch nhất là chèn một phần tử nội tuyến hỗ trợ vào <li />phần tử là phần tử con thứ nhất, chiều cao phải được đặt thành 100% (chiều cao của cha mẹ của nó, dấu <li />) và vertical-alignđặt nó thành trung bình . Để đạt được điều này, bạn có thể đặt một <span />, nhưng cách thuận tiện nhất là sử dụng li:afterlớp giả.

Ảnh chụp màn hình:

ul.menu-horizontal {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
}

ul.menu-horizontal:after {
    content: '';
    clear: both;
    float: none;
    display: block;
}

ul.menu-horizontal li {
    padding: 5px 10px;
    box-sizing: border-box;
    height: 100%;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    float: left;
}

/* The magic happens here! */
ul.menu-horizontal li:before {
    content: '';
    display: inline;
    height: 100%;
    vertical-align: middle;
}

Hãy thử giải pháp này

Hoạt động tốt nhất trong hầu hết các trường hợp

bạn có thể phải sử dụng div thay vì li cho điều đó

.DivParent {
    height: 100px;
    border: 1px solid lime;
    white-space: nowrap;
}
.verticallyAlignedDiv {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
.DivHelper {
    display: inline-block;
    vertical-align: middle;
    height:100%;
}

<div class="DivParent">
    <div class="verticallyAlignedDiv">
        <p>Isnt it good!</p>
     
    </div><div class="DivHelper"></div>
</div>

Giải pháp đơn giản cho căn chỉnh dọc giữa ... đối với tôi, nó hoạt động như một sự quyến rũ

ul{display:table; text-align:center; margin:0 auto;}
li{display:inline-block; text-align:center;}
li.items_inside_li{display:inline-block; vertical-align:middle;}