it-swarm-vi.tech

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 phải được định vị absolute 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>
646
Abdu

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

Hiểu vertical-align hoặc "Cách (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 Lầnlà 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ỉ 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 của Hồi là một chiều cao toàn bộ thùng chứa cha mẹ, nó có chiều cao của dòng văn bản mà họ có trong. 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 phần tử bên trong có thể có chiều cao cố định , bạn có thể đặt vị trí của nó absolute và chỉ định vị trí height, margin-toptop của nó. ví dụ jsfiddle
    • Nếu phần tử chính giữa bao gồm một dòng duy nhất chiều cao cha mẹ của nó được cố định bạn có thể chỉ cần đặt container 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.
816
Konrad Rudolph

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;
}
109
E. Serrano

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 .class hay #id, kết quả sẽ không thay đổi.

104
user2346571

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

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}
44
Romain
 .outer {
   display: flex;
   align-items: center; 
   justify-content: center;
 }
25

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

BẢN DEMO tại đây

21
abernier

Để đị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%);
}
16
Blacksonic

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

Sắp xếp làm 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 đượ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ị phần tử H1 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 kiểu vertical-align:

#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 phần tử H1 - đ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>
16
Shog9

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>
15
Anita Mandal

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-căn: giữa.

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

11
joan16v

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/

10
Shadowbob

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 phản hồi divheightwidth.

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

3
Dashrath

Theo mặc định, h1 là một thành phần 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 chính xác. 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:

Đâ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>
3
Mike Tunnicliffe

Sử dụng CSS để căn giữa, 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ả

 Result

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

3
Henk-Martijn

Cho đến 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!

2
Shivam

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

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ới thời kỳ đồ đá!

1
Joel Moses

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

0
BernieSF

Đâ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;
}
0
danigonlinea

Có hai cách để sắp xếp các phần tử theo chiều dọc và chiều ngang

1. Bootstrap 4.3.X

để căn chỉnh theo chiều 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;
    justify-content: 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>
0
WasiF

# 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 thức chuyển đổi/dịch

    enter image description here

    Bản trình diễn

/* 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>
0
Vahid Akhtar

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