Làm thế nào để tôi sắp xếp theo chiều dọc văn bản trong một div?

Tôi đang cố gắng tìm cách hiệu quả nhất để căn chỉnh văn bản với div. Tôi đã thử một vài thứ và dường như không có gì để làm việc.

.testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  vertical-align: middle;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em 0 1em 0;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Định tâm dọc trong CSS
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Tóm tắt bài viết:

Đối với trình duyệt CSS 2, người ta có thể sử dụng display:table/ display:table-cellđể căn giữa nội dung.

Một mẫu cũng có sẵn tại JSFiddle :

div { border:1px solid green;}

<div style="display: table; height: 400px; overflow: hidden;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>
      everything is vertically centered in modern IE8+ and others.
    </div>
  </div>
</div>

Có thể hợp nhất các bản hack cho các trình duyệt cũ (Internet Explorer 6/7) thành các kiểu với việc sử dụng #để ẩn các kiểu từ các trình duyệt mới hơn:

div { border:1px solid green;}

<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=
    "#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
      everything is vertically centered
    </div>
  </div>
</div>

Bạn cần thêm line-heightthuộc tính và thuộc tính đó phải phù hợp với chiều cao của div. Trong trường hợp của bạn:

.center {
  height: 309px;
  line-height: 309px; /* same as height! */
}

<div class="center">
  A single line.
</div>

Trong thực tế, bạn có thể có thể loại bỏ heighthoàn toàn thuộc tính.

Điều này chỉ hoạt động cho một dòng văn bản , vì vậy hãy cẩn thận.

Đây là một nguồn tài nguyên tuyệt vời

Từ http://howtocenterincss.com/ :

Trung tâm trong CSS là một nỗi đau ở mông. Dường như có rất nhiều cách để làm điều đó, tùy thuộc vào nhiều yếu tố. Điều này hợp nhất chúng và cung cấp cho bạn mã bạn cần cho mỗi tình huống.

Sử dụng Flexbox

Phù hợp với việc giữ cho bài đăng này được cập nhật với công nghệ mới nhất, đây là cách dễ dàng hơn nhiều để tập trung vào thứ gì đó bằng Flexbox. Flexbox không được hỗ trợ trong Internet Explorer 9 trở xuống .

Dưới đây là một số tài nguyên tuyệt vời:

• Hướng dẫn về Flexbox
• Các yếu tố định tâm với Flexbox
• Cú pháp Internet Explorer 10 cho Flexbox
• Hỗ trợ cho Flexbox

JSFiddle với tiền tố trình duyệt

li {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  /* Column | row */
}

<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

Giải pháp khác

Đây là từ zerosixthree và cho phép bạn tập trung mọi thứ với sáu dòng CSS

Phương pháp này không được hỗ trợ trong Internet Explorer 8 trở xuống .

jsfiddle

p {
  text-align: center;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

Câu trả lời trước

Một cách tiếp cận đơn giản và đa trình duyệt, hữu ích vì các liên kết trong câu trả lời được đánh dấu hơi lỗi thời.

Làm cách nào để căn giữa văn bản theo chiều dọc và chiều ngang trong cả danh sách không có thứ tự và div mà không cần dùng đến chiều cao của dòng JavaScript hoặc CSS . Cho dù bạn có bao nhiêu văn bản, bạn sẽ không phải áp dụng bất kỳ lớp đặc biệt nào cho các danh sách hoặc div cụ thể (mã này giống nhau cho từng loại). Điều này hoạt động trên tất cả các trình duyệt chính bao gồm Internet Explorer 9, Internet Explorer 8, Internet Explorer 7, Internet Explorer 6, Firefox, Chrome, Opera và Safari. Có hai bảng định kiểu đặc biệt (một cho Internet Explorer 7 và một cho Internet Explorer 6) để giúp chúng hoạt động do những hạn chế CSS mà các trình duyệt hiện đại không có.

Andy Howard - Cách căn giữa văn bản theo chiều dọc và chiều ngang trong một danh sách không có thứ tự hoặc div

Vì tôi không quan tâm nhiều đến Internet Explorer 7/6 cho dự án cuối cùng mà tôi đã thực hiện, tôi đã sử dụng một phiên bản rút gọn một chút (nghĩa là loại bỏ những thứ khiến nó hoạt động trong Internet Explorer 7 và 6). Nó có thể hữu ích cho người khác ...

Câu đố

.outerContainer {
  display: table;
  width: 100px;
  /* Width of parent */
  height: 100px;
  /* Height of parent */
  overflow: hidden;
}

.outerContainer .innerContainer {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

li {
  background: #ddd;
  width: 100px;
  height: 100px;
}

<ul>
  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>

  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>
</ul>

Nó rất dễ dàng với display: flex. Với phương pháp sau, văn bản trong divsẽ được căn giữa theo chiều dọc:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}

<div>
  Your text here.
</div>

Và nếu bạn muốn, ngang:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}

<div>
  Your text here.
</div>

Bạn phải xem phiên bản trình duyệt bạn cần; trong các phiên bản cũ, mã không hoạt động.

Tôi sử dụng như sau để trung tâm các yếu tố ngẫu nhiên theo chiều dọc dễ dàng:

HTML:

<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>

CSS:

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

Điều này tập trung văn bản vào giữa của tôi divở giữa chính xác của bên ngoài cao 200px div. Lưu ý rằng bạn có thể cần sử dụng tiền tố trình duyệt (như -webkit-trong trường hợp của tôi) để thực hiện công việc này cho trình duyệt của bạn.

Điều này làm việc không chỉ cho văn bản, mà còn cho các yếu tố khác.

Bạn có thể làm điều này bằng cách đặt màn hình thành 'ô bảng' và áp dụng vertical-align: middle;:

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

Tuy nhiên, điều này không được hỗ trợ bởi tất cả các phiên bản Internet Explorer theo đoạn trích này mà tôi đã sao chép từ http://www.w3schools.com/cssref/pr_group_display.asp mà không được phép.

Lưu ý: Các giá trị "bảng nội tuyến", "bảng", "chú thích bảng", "ô bảng", "cột bảng", "nhóm bảng cột", "hàng bảng", "hàng bảng -group "và" kế thừa "không được Internet Explorer 7 hỗ trợ trước đó. Internet Explorer 8 yêu cầu! DOCTYPE. Internet Explorer 9 hỗ trợ các giá trị.

Bảng sau đây cho thấy các giá trị hiển thị được phép cũng từ http://www.w3schools.com/cssref/pr_group_display.asp .

Những ngày này (chúng tôi không cần Internet Explorer 6-7-8 nữa) Tôi sẽ chỉ sử dụng CSS display: tablecho vấn đề này (hoặc display: flex).

Đối với các trình duyệt cũ hơn:

Bàn:

.vcenter {
    display: table;
    background: #eee; /* optional */
    width: 150px;
    height: 150px;
    text-align: center; /* optional */
}

.vcenter > :first-child {
    display: table-cell;
    vertical-align: middle;
}

<div class="vcenter">
  <p>This is my Text</p>
</div>

Linh hoạt:

.vcenter {
    display: flex; /* <-- Here */
    align-items: center; /* <-- Here */
    justify-content: center; /* optional */
    height: 150px; /* <-- Here */
    background: #eee;  /* optional */
    width: 150px;
}

<div class="vcenter">
  <p>This is my text</p>
</div>

Đây thực sự là giải pháp yêu thích của tôi cho vấn đề này (hỗ trợ trình duyệt đơn giản và rất tốt):

div {
    margin: 5px;
    text-align: center;
    display: inline-block;
}

.vcenter {
    background: #eee;  /* optional */
    width: 150px;
    height: 150px;
}
.vcenter:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */
}

.vcenter > :first-child {
    display: inline-block;
    vertical-align: middle;
    max-width: 99.999%;
}

<div class="vcenter">
  <p>This is my text</p>
</div>
<div class="vcenter">
  <h4>This is my Text<br/>Text<br/>Text</h4>
</div>
<div class="vcenter">
  <div>
   <p>This is my</p>
   <p>Text</p>
  </div>
</div>

Hãy thử điều này, thêm vào div cha:

display: flex;
align-items: center;

Đây là một giải pháp hoạt động tốt nhất cho một dòng văn bản.

Nó cũng có thể hoạt động cho văn bản nhiều dòng với một số điều chỉnh nếu biết số lượng dòng.

.testimonialText {
    font-size: 1em; /* Set a font size */
}
.testimonialText:before { /* Add a pseudo element */
    content: "";
    display: block;
    height: 50%;
    margin-top: -0.5em; /* Half of the font size */
}

Đây là một JSFiddle .

<!DOCTYPE html>
<html>

  <head>
    <style>
      .container {
        height: 250px;
        background: #f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
      }
      p{
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </body>

</html>

Bạn có thể căn chỉnh văn bản trung tâm theo chiều dọc bên trong div bằng Flexbox.

<div>
   <p class="testimonialText">This is the testimonial text.</p>
</div>

div {
   display: flex;
   align-items: center;
}

Bạn có thể tìm hiểu thêm về nó tại Hướng dẫn hoàn chỉnh về Flexbox .

Kiểm tra giải pháp đơn giản này:

HTML

<div class="block-title"><h3>I'm a vertically centered element</h3></div>

CSS

.block-title {
    float: left;
    display: block;
    width: 100%;
    height: 88px
}

.block-title h3 {
    display: table-cell;
    vertical-align: middle;
    height: inherit
}

Câu đố

Có một cách đơn giản hơn để căn chỉnh nội dung theo chiều dọc mà không cần dùng đến bảng / ô bảng:

http://jsfiddle.net/bBW5w/1/

Trong đó tôi đã thêm một div vô hình (width = 0) giả định toàn bộ chiều cao của container.

Nó dường như hoạt động trong Internet Explorer và Firefox (phiên bản mới nhất). Tôi đã không kiểm tra với các trình duyệt khác

  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

Và dĩ nhiên là CSS:

.t, .t > div:first-child
{
    border: 1px solid green;
}
.t
{
    height: 400px;
}
.t > div
{
    display: inline-block;
    vertical-align: middle
}
.t > div:last-child
{
    height: 100%;
}

Đây là giải pháp sạch nhất mà tôi đã tìm thấy (Internet Explorer 9+) và thêm một bản sửa lỗi cho vấn đề "tắt bởi 0,5 pixel" bằng cách sử dụng transform-stylecác câu trả lời khác đã bị bỏ qua.

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

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

Nguồn: Căn chỉnh mọi thứ chỉ với 3 dòng CSS

Một giải pháp đơn giản cho một yếu tố không biết giá trị:

HTML

<div class="main">
    <div class="center">
        whatever
    </div>
</div>

CSS

.main {
    position: relative
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

Theo câu trả lời của Adam Tomat, đã chuẩn bị một ví dụ về JSFiddle để căn chỉnh văn bản trong div :

<div class="cells-block">    
    text<br/>in the block   
</div>

bằng cách sử dụng display: flex trong CSS:

.cells-block {
    display: flex;
    flex-flow: column;
    align-items: center;       /* Vertically   */
    justify-content: flex-end; /* Horisontally */
    text-align: right;         /* Addition: for text's lines */
}

với một ví dụ khác và một vài lời giải thích trong một bài đăng trên blog .

Tự động ký quỹ trên một mục lưới.

Tương tự như Flexbox, áp dụng tự động lề trên một mục lưới đặt nó ở cả hai trục:

.container {
  display: grid;
}
.element {
  margin: auto;
}

Flexbox hoạt động hoàn hảo với tôi, tập trung nhiều yếu tố bên trong div cha theo chiều ngang và chiều dọc.

Mã HTML:

<div class="parent-div">
    <div class="child-div">
      <a class="footer-link" href="https://www.github.com/">GitHub</a>
      <a class="footer-link" href="https://www.facebook.com/">Facebook</a>
      <p class="footer-copywrite">© 2019 Lorem Ipsum.</p>
    </div>
  </div>

CSS-Code:
Mã bên dưới xếp chồng tất cả các phần tử bên trong div-div trong một cột, căn giữa các phần tử theo chiều ngang và chiều dọc. Tôi đã sử dụng div con để giữ hai phần tử Anchor trên cùng một dòng (hàng). Không có div-div, cả ba phần tử (Anchor, Anchor & Par Đoạn) được xếp chồng lên nhau trong cột của cha-div chồng lên nhau. Ở đây chỉ có div con được xếp chồng lên nhau trong cột cha-div.

/* */
.parent-div {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Sử dụng:

h1 {
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.container {
    height: 200px;
    width: 500px;
    position: relative;
    border: 1px solid #eee;
}

<div class="container">
    <h1>Vertical align text</h1>
</div>

Với thủ thuật này, bạn có thể căn chỉnh bất cứ thứ gì nếu bạn không muốn làm cho nó ở giữa thêm "trái: 0" để căn trái.

HTML

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

CSS

 .relative {
     position: relative;
 }
 .absolute {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.5);
 }
 .table {
     display: table;
     height: 100%;
     width: 100%;
     text-align: center;
     color: #fff;
 }
 .table-cell {
     display: table-cell;
     vertical-align: middle;
 }

Sử dụng flex, hãy cẩn thận với sự khác biệt trong kết xuất của trình duyệt.

Điều này hoạt động tốt cho cả Chrome và Internet Explorer:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #fcc;
}

<div class="outer"><div class="inner">Active Tasks</div></div>

So sánh với cái này chỉ hoạt động với Chrome:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    background-color: #fcc;
}

<div class="outer">
<div class="inner"><span style=" margin: auto;">Active Tasks</span></div>
</div>

Đây là một biến thể của divmột divmô hình sử dụng calc()trong CSS.

<div style="height:300px; border:1px solid green;">
  Text in outer div.
  <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
    Text in inner div.
  </div>
</div>

Điều này hoạt động, bởi vì:

• position:absolutecho vị trí chính xác của divtrongdiv
• chúng tôi biết chiều cao của bên trong divbởi vì chúng tôi đặt nó 20px.
• calc(50% - 10px)cho 50% - một nửa chiều cao để định tâm bên trongdiv

Điều này hoạt động tốt:

HTML

<div class="information">
    <span>Some text</span>
    <mat-icon>info_outline</mat-icon>
</div>

Sass

.information {
    display: inline-block;
    padding: 4px 0;
    span {
        display: inline-block;
        vertical-align: middle;
    }
    mat-icon {
        vertical-align: middle;
    }
}

Không có và với thẻ hình ảnh <mat-icon>(đó là một phông chữ).

Hmm, rõ ràng có nhiều cách để giải quyết điều này.

Nhưng tôi có một <div>vị trí hoàn toàn, height:100%(thực tế top:0;bottom:0và chiều rộng cố định) và display:table-cellchỉ không hoạt động để căn giữa văn bản theo chiều dọc. Giải pháp của tôi đã yêu cầu một yếu tố nhịp bên trong, nhưng tôi thấy nhiều giải pháp khác cũng làm như vậy, vì vậy tôi cũng có thể thêm nó:

Container của tôi là một .labelvà tôi muốn số theo chiều dọc tập trung trong đó. Tôi đã làm điều đó bằng cách định vị hoàn toàn tại top:50%và thiết lậpline-height:0

<div class="label"><span>1.</span></div>

Và CSS như sau:

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

Xem nó trong hành động: http://jsfiddle.net/jcward/7gMLx/

Bạn có thể sử dụng css flexbox.

.testimonialText {
  height: 500px;
  padding: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b4d2d2;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Sử dụng lưới CSS đã làm điều đó cho tôi:

.outer {
  background-color: grey;
  width: 10rem;
  height: 10rem;
  display: grid;
  justify-items: center;
}

.inner {
  background-color: red;
  align-self: center;
}

<div class='outer'>
  <div class='inner'>
    Content
  </div>
</div>

Cố gắng nhúng một phần tử bảng.

<div>
  <table style='width:200px; height:100px;'>
    <td style='vertical-align:middle;'>
      copenhagen
    </td>
  </table>
</div>

Có một số thủ thuật để hiển thị nội dung hoặc hình ảnh ở trung tâm của div. Một số câu trả lời thực sự hay và tôi hoàn toàn đồng ý với những câu này.

Định tâm ngang và dọc tuyệt đối trong CSS

http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizontal-and-vertical-centering-in-css/

Có hơn 10 kỹ thuật với các ví dụ . Bây giờ tùy thuộc vào bạn mà bạn thích.

Không nghi ngờ gì, display:table; display:table-Celllà một mẹo tốt hơn.

Một số thủ thuật hay như sau:

Thủ thuật 1 - Bằng cách sử dụng display:table; display:table-cell

HTML

<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
        CONTENT
    </div>
  </div>
</div>

Mã CSS

.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

Thủ thuật 2 - Bằng cách sử dụng display:inline-block

HTML

<div class="Center-Container is-Inline">
  <div class="Center-Block">
     CONTENT
  </div>
</div>

Mã CSS

.Center-Container.is-Inline {
  text-align: center;
  overflow: auto;
}

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for Internet Explorer 9+ */
}

Thủ thuật 3 - Bằng cách sử dụng position:relative;position:absolute

<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;">
  <div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;">
    <h4>ABSOLUTE CENTER, <br/>
WITHIN CONTAINER.</h4>
    <p>This box is absolutely centered, horizontally and vertically, within its container</p>
  </div>
</div>

CSS:

.vertical {
   display: table-caption;
}

Thêm lớp này vào phần tử có chứa những thứ bạn muốn căn chỉnh theo chiều dọc

Nếu bạn cần sử dụng với thuộc min-heighttính, bạn phải thêm CSS này vào:

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}