Làm thế nào để sắp xếp các yếu tố dọc trong một div?

Tôi có một div với hai hình ảnh và một h1. Tất cả chúng cần được sắp xếp theo chiều dọc trong div, cạnh nhau.

Một trong những hình ảnh cần được absoluteđịnh vị trong div.

CSS cần thiết để làm việc này trên tất cả các trình duyệt phổ biến là gì?

<div id="header">
    <img src=".." ></img>
    <h1>testing...</h1>
    <img src="..."></img>
</div>

Wow, vấn đề này là phổ biến. Nó dựa trên một sự hiểu lầm trong vertical-aligntài sản. Bài viết tuyệt vời này giải thích nó:

Hiểu vertical-align, hoặc "Làm thế nào (không) đối với nội dung theo chiều dọc" của Gavin Kistner.

Cách làm trung tâm trong CSS. Đây là một công cụ web tuyệt vời giúp tìm các thuộc tính định tâm CSS cần thiết cho các tình huống khác nhau.

Tóm lại _{^{(và để ngăn ngừa thối liên kết)}} :

• Các phần tử nội tuyến (và chỉ các phần tử nội tuyến) có thể được căn chỉnh theo chiều dọc trong ngữ cảnh của chúng thông qua vertical-align: middle. Tuy nhiên, bối cảnh trên mạng không phải là toàn bộ chiều cao của vùng chứa cha, đó là chiều cao của dòng văn bản mà chúng đang ở. Ví dụ jsfiddle
• Đối với các phần tử khối, căn chỉnh dọc khó hơn và mạnh mẽ phụ thuộc vào tình huống cụ thể:
  • Nếu các yếu tố bên trong có thể có một chiều cao cố định , bạn có thể làm cho vị thế của mình absolutevà chỉ định của nó height, margin-topvà topvị trí. ví dụ jsfiddle
  • Nếu phần tử chính giữa bao gồm một dòng duy nhất và chiều cao cha mẹ của nó được cố định, bạn có thể chỉ cần đặt bộ chứa line-heightđể lấp đầy chiều cao của nó. Phương pháp này khá linh hoạt theo kinh nghiệm của tôi. ví dụ jsfiddle
  • Có nhiều trường hợp đặc biệt như vậy.

Bây giờ hỗ trợ flexbox đang tăng lên, CSS này được áp dụng cho phần tử chứa sẽ định tâm theo chiều dọc của mục được chứa:

.container {        
    display: flex;
    align-items: center;
}

Sử dụng phiên bản tiền tố nếu bạn cũng cần nhắm mục tiêu Explorer 10 và các trình duyệt Android cũ (<4.4):

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

Tôi đã sử dụng mã rất đơn giản này:

HTML:

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

CSS:

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

Rõ ràng, cho dù bạn sử dụng một .classhay một #id, kết quả sẽ không thay đổi.

Nó làm việc cho tôi:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}

 .outer {
   display: flex;
   align-items: center; 
   justify-content: center;
 }

Một kỹ thuật từ một người bạn của tôi:

HTML:

<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

CSS:

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}

DEMO đây

Để định vị các phần tử khối vào trung tâm (hoạt động trong IE9 trở lên), cần một trình bao bọc div:

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

Tất cả chúng cần được sắp xếp theo chiều dọc trong div

Sắp xếp thế nào ? Đỉnh của hình ảnh phù hợp với đầu của văn bản?

Một trong những hình ảnh cần phải được định vị tuyệt đối trong div.

Vị trí hoàn toàn tương đối so với DIV? Có lẽ bạn có thể phác thảo những gì bạn đang tìm kiếm ...?

fd đã mô tả các bước để định vị tuyệt đối, cũng như điều chỉnh hiển thị H1phần tử sao cho hình ảnh sẽ xuất hiện nội tuyến với nó. Do đó, tôi sẽ thêm rằng bạn có thể căn chỉnh hình ảnh bằng cách sử dụng vertical-alignkiểu:

#header h1 { display: inline; }
#header img { vertical-align: middle; }

... điều này sẽ đặt tiêu đề và hình ảnh lại với nhau, với các cạnh trên cùng được căn chỉnh. Các tùy chọn căn chỉnh khác tồn tại; xem tài liệu . Bạn cũng có thể thấy có ích khi bỏ DIV và di chuyển hình ảnh bên trong H1phần tử - điều này cung cấp giá trị ngữ nghĩa cho vùng chứa và loại bỏ nhu cầu điều chỉnh hiển thị của H1:

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>

Sử dụng công thức này và nó sẽ hoạt động luôn mà không có vết nứt:

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */

<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>

Hầu như tất cả các phương pháp cần xác định chiều cao, nhưng thường chúng ta không có bất kỳ chiều cao nào.
Vì vậy, đây là một mẹo 3 dòng CSS3 không yêu cầu phải biết chiều cao.

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

Nó được hỗ trợ ngay cả trong IE9.

với tiền tố nhà cung cấp của nó:

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

Nguồn: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Theo hai cách, bạn có thể căn chỉnh các yếu tố theo chiều dọc và chiều ngang

1. Bootstrap 4
2. CSS3

1. Bootstrap 4.3.X

cho căn dọc: d-flex align-items-center

để căn chỉnh ngang: d-flex justify-content-center

.container {
    height: 180px;
    width:100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
rel="stylesheet"/>

<div class="d-flex align-items-center justify-content-center bg-info container">
  <div class="bg-light p-2">I am in Center</div>
</div>

2. CSS3

.container {
    display: flex;
    align-items: center;  // verticall center
    justify-content: center; // horizontally center

    background-color: #17a2b8;
    height: 180px;
    width:100%;
}

.child {
  background-color: #f8f9fa;
  padding: 0.5rem;
}

<div class="container">
  <div class="child">I am in Center</div>
</div>

Thủ thuật của tôi là đặt bên trong div một bảng có 1 hàng và 1 cột, đặt 100% chiều rộng và chiều cao và thuộc tính dọc-align: middle.

<div>

    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>

</div>

Câu đố: http://jsfiddle.net/joan16v/sbqjnn9q/

# 3 cách để tạo div con trung tâm trong div cha

• Phương pháp định vị tuyệt đối
• Phương pháp Flexbox

• Phương pháp chuyển đổi / dịch

  

  Bản giới thiệu

/* 1st way */
.parent1 {
  background: darkcyan;
   width: 200px;
   height: 200px;
   position: relative;
}
.child1 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px;
}

/* 2nd way */
.parent2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: darkcyan;
  height: 200px;
  width: 200px;
}
.child2 {
  background: white;
  height: 30px;
  width: 30px;
}

/* 3rd way */
.parent3 {
  position: relative;
  height: 200px;
  width: 200px;
  background: darkcyan;
}
.child3 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="parent1">
  <div class="child1"></div>
</div>
<hr />

<div class="parent2">
  <div class="child2"></div>
</div>
<hr />

<div class="parent3">
  <div class="child3"></div>
</div>

Sử dụng CSS cho trung tâm dọc, bạn có thể để các thùng chứa bên ngoài hoạt động như một bảng và nội dung dưới dạng một ô của bảng. Trong định dạng này, các đối tượng của bạn sẽ ở giữa. :)

Tôi đã lồng nhiều đối tượng trong JSFiddle làm ví dụ, nhưng ý tưởng cốt lõi là như thế này:

HTML

<div class="circle">
  <div class="content">
    Some text
  </div>
</div>

CSS

 .circle {
   /* act as a table so we can center vertically its child */
   display: table;
   /* set dimensions */
   height: 200px;
   width: 200px;
   /* horizontal center text */
   text-align: center;
   /* create a red circle */
   border-radius: 100%;
   background: red;
 }

 .content {
   /* act as a table cell */
   display: table-cell;
   /* and now we can vertically center! */
   vertical-align: middle;
   /* some basic markup */
   font-size: 30px;
   font-weight: bold;
   color: white;
 }

Ví dụ về nhiều đối tượng:

HTML

<div class="container">
  <div class="content">

    <div class="centerhoriz">

      <div class="circle">
        <div class="content">
          Some text
        </div><!-- content -->
      </div><!-- circle -->

      <div class="square">
        <div class="content">
          <div id="smallcircle"></div>
        </div><!-- content -->
      </div><!-- square -->

    </div><!-- center-horiz -->

  </div><!-- content -->
</div><!-- container -->

CSS

.container {
  display: table;
  height: 500px;
  width: 300px;
  text-align: center;
  background: lightblue;
}

.centerhoriz {
  display: inline-block;
}

.circle {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: red;
  border-radius: 100%;
  margin: 10px;
}

.square {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: blue;
  margin: 10px;
}

.content {
  display: table-cell;
  vertical-align: middle;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

#smallcircle {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: green;
  border-radius: 100%;
}

Kết quả

https://jsfiddle.net/martjemeyer/ybs032uc/1/

Theo mặc định, h1 là một phần tử khối và sẽ hiển thị trên dòng sau img đầu tiên và sẽ khiến img thứ hai xuất hiện trên dòng tiếp theo khối.

Để ngăn điều này xảy ra, bạn có thể đặt h1 có hành vi luồng nội tuyến:

#header > h1 { display: inline; }

Đối với việc định vị hoàn toàn img bên trong div , bạn cần đặt div chứa có "kích thước đã biết" trước khi điều này hoạt động bình thường. Theo kinh nghiệm của tôi, bạn cũng cần thay đổi thuộc tính vị trí khỏi mặc định - vị trí: tương đối hoạt động với tôi:

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

Nếu bạn có thể làm cho nó hoạt động, bạn có thể muốn thử dần dần loại bỏ các thuộc tính chiều cao, chiều rộng, vị trí khỏi div.header để có được các thuộc tính bắt buộc tối thiểu để có được hiệu ứng bạn muốn.

CẬP NHẬT:

Dưới đây là một ví dụ hoàn chỉnh hoạt động trên Firefox 3:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Example of vertical positioning inside a div</title>
        <style type="text/css">
            #header > h1 { display: inline; }
            #header { border: solid 1px red; 
                      position: relative; }
            #img-for-abs-positioning { position: absolute;
                                       bottom: -1em; right: 2em; }
        </style>
    </head>

    <body>
        <div id="header">
            <img src="#" alt="Image 1" width="40" height="40" />
            <h1>Header</h1>
            <img src="#" alt="Image 2" width="40" height="40" 
                 id="img-for-abs-positioning" />
        </div>
    </body>
</html>

Chúng tôi có thể sử dụng tính toán hàm CSS để tính kích thước của phần tử và sau đó định vị phần tử con tương ứng.

Ví dụ HTML:

<div class="box">
    <span><a href="#">Some Text</a></span>
</div>

Và CSS:

.box {
    display: block;
    background: #60D3E8;
    position: relative;
    width: 300px;
    height: 200px;
    text-align: center;

}
.box span {
    font: bold 20px/20px 'source code pro', sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 10px);
}
a {
    color: white;
    text-decoration: none;
}

Bản demo được tạo tại đây: https://jsfiddle.net/xnjq1t22/

Giải pháp này hoạt động tốt với đáp ứng div heightvà widthlà tốt.

Lưu ý: Hàm calc không được kiểm tra tính tương thích với các trình duyệt cũ.

Theo như ngày hôm nay, tôi đã tìm thấy một cách giải quyết mới để sắp xếp theo chiều dọc nhiều dòng văn bản trong div bằng CSS3 (và tôi cũng đang sử dụng hệ thống lưới bootstrap v3 để làm đẹp UI), như sau:

.immediate-parent-of-text-containing-div{
    height: 50px;         /* or any fixed height that suits you.*/
}

.text-containing-div {
    display: inline-grid;
    align-items: center;
    text-align: center;
    height: 100%;
}

Theo hiểu biết của tôi, cha mẹ ngay lập tức của văn bản có chứa phần tử phải có chiều cao. Tôi hy vọng nó sẽ giúp bạn quá. Cảm ơn!

Cách ưa thích mới của tôi để làm điều đó là với lưới CSS:

/* technique */

.wrapper {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
}

/* visual emphasis */

.wrapper {
  border: 1px solid red;
  height: 180px;
  width: 400px;
}

img {
  width: 100px;
  height: 80px;
  background: #fafafa;
}

img:nth-child(2) {
  height: 120px;
}

<div class="wrapper">
  <img src="https://source.unsplash.com/random/100x80/?bear">
  <img src="https://source.unsplash.com/random/100x120/?lion">
  <img src="https://source.unsplash.com/random/100x80/?tiger">
</div>

Chỉ cần sử dụng bảng một ô bên trong div! Chỉ cần đặt chiều cao của ô và bảng và với 100% và bạn có thể sử dụng căn chỉnh dọc.

Một bảng một ô bên trong div xử lý căn chỉnh theo chiều dọc và tương thích ngược về thời đồ đá!

Tôi đã sử dụng giải pháp sau (không có định vị và không có chiều cao dòng) kể từ hơn một năm, nó cũng hoạt động với IE 7 và 8.

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>

Đây là giải pháp cá nhân của tôi cho một phần tử i bên trong div

Ví dụ về JSFiddle

HTML

<div class="circle">
    <i class="fa fa-plus icon">
</i></div>

CSS

.circle {
   border-radius: 50%;
   color: blue;
   background-color: red;
   height:100px;
   width:100px;
   text-align: center;
   line-height: 100px;
}

.icon {
  font-size: 50px;
  vertical-align: middle;
}

Đối với tôi, nó hoạt động theo cách này:

<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
    <a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>

Phần tử "a" được chuyển đổi thành một nút, sử dụng các lớp Bootstrap và giờ đây nó được căn giữa theo chiều dọc bên trong một "div" bên ngoài.

bằng cách sử dụng màn hình flex, trước tiên bạn cần bọc thùng chứa của vật phẩm mà bạn muốn căn chỉnh.

<div class="outdiv">
      <div class="indiv">
         <span>test1</span>
         <span>test2</span>
      </div>
    </div>

sau đó áp dụng css sau cho trình bao bọc div hoặc outdiv trong ví dụ của tôi

.outdiv {
    display: flex;
    justify-content:center;
    align-items:center;
}

Chỉ cái này:

<div>
    <table style="width: 100%; height: 100%">
        <tr>
            <td style="width: 100%; height: 100%; vertical-align: middle;">
               What ever you want vertically-aligned
            </td>
        </tr>
    </table>
</div>

Một bảng một ô bên trong div xử lý căn chỉnh theo chiều dọc và tương thích ngược về thời đồ đá!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <style type="text/css">
            #style_center { position:relative; top:50%; left:50%; }
            #style_center_absolute { position:absolute; top:50px; left:50px; }
            <!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
        </style>
    </head>

    <body>
        <div style="height:200px; width:200px; background:#00FF00">
            <div id="style_center">+</div>
        </div>
    </body>
</html>

Đây chỉ là một cách tiếp cận (đáp ứng) khác:

html,
    body {
        height: 100%;
    }
    body {
        margin: 0;
    }

    .table {
        display: table;
        width:  auto;
        table-layout:auto;
        height: 100%;
    }
        .table:nth-child(even) {
            background: #a9edc3;
        }
        .table:nth-child(odd) {
            background: #eda9ce;
        }

    .tr {
        display: table-row;
    }
    .td {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
    }

http://jsfiddle.net/herrfischerhamburg/JcVxz/

Tôi là một chàng trai .NET mới tham gia lập trình web. Tôi đã không sử dụng CSS (tốt, một chút thôi). Tôi đã sử dụng một ít JavaScript để thực hiện định tâm dọc cùng với hàm .css của jQuery.

Tôi chỉ đăng tất cả mọi thứ từ bài kiểm tra của tôi. Nó có thể không quá thanh lịch, nhưng nó hoạt động cho đến nay.

script.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

        <script type="application/javascript">
            function centerElementVertically(id) {
                var btnDivHeight = $(id).outerHeight();
                var prnt = $(id).parent();
                var parentHeight = prnt.outerHeight();

                var newTop = ((parentHeight - btnDivHeight) / 2) + 'px';
                var newPct = newTop / parentHeight+'%;';

                $(id).css({top: newTop});
            }

            function showAlert(){
                alert("alert");
            }

            $(window).load(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            });

            $(window).resize(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            })
        </script>

        <style>
            #div1 {
                position:relative;
                height: 33%;
                background-color: red;
                overflow: hidden;
            }
            #buttonLeft {
                position: relative;
                float:left;
                width:50%;
                height:20%;
                background-color: cornsilk;
            }
            #buttonRight {
                position: relative;
                float:right;
                width:50%;
                height:50%;
                background-color: darkorchid;
            }
            #testerbtn {
                position: absolute;
            }
            body {
                background-color: aqua;
            }
        </style>

        <body>
            <div id="div1">
                <div id="buttonLeft">
                    <button id="testerbtn">tester</button>
                </div>
                <div id="buttonRight"></div>
            </div>
        </body>
    </head>
</html>

<div id="header" style="display: table-cell; vertical-align:middle;">

...

hoặc CSS

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

Bảo hiểm trình duyệt