a

Câu hỏi Làm thế nào để theo chiều ngang trung tâm một
trong một
khác?


Làm cách nào tôi có thể xoay ngang giữa <div> trong vòng khác <div> sử dụng CSS (nếu nó thậm chí có thể)?

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>


3636
2018-06-09 08:34


gốc


Trong những câu trả lời tuyệt vời đó, tôi chỉ muốn nhấn mạnh rằng bạn phải đặt "#inner" là "chiều rộng", hoặc nó sẽ là "100%" và bạn không thể biết liệu nó đã được căn giữa chưa. - Jony


Các câu trả lời:


Bạn có thể áp dụng CSS này cho bên trong <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}

Tất nhiên, bạn không phải đặt width đến 50%. Bất kỳ chiều rộng nào nhỏ hơn <div> sẽ làm việc. Các margin: 0 auto là những gì thực sự tập trung.

Nếu bạn đang nhắm mục tiêu IE8 +, có thể tốt hơn là nên thay thế điều này:

#inner {
  display: table;
  margin: 0 auto;
}

Nó sẽ làm cho trung tâm phần tử bên trong theo chiều ngang và nó hoạt động mà không cần thiết lập một width.

Ví dụ làm việc ở đây:

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>


4097



Đối với các trung tâm dọc tôi thường sử dụng "line-height" (line-height == height). Điều này là đơn giản và tốt đẹp nhưng nó chỉ làm việc với một dòng văn bản nội dung :) - Nicolas Guillaume
Bạn phải sử dụng thẻ DOCTYPE trên trang html của bạn để làm cho nó hoạt động tốt trên IE. - Fabio
Lưu ý rằng có thể cần phải thêm "float: none;" cho #inner. - Mert Mertce
Bạn cũng thiết lập lề trên và dưới tới 0, không liên quan. Đặt tốt hơn margin-left: auto; margin-right: auto Tôi nghĩ. - Emmanuel Touzery
Không cần thiết margin:0 auto: nó có thể margin: <whatever_vertical_margin_you_need> auto thứ hai là lề ngang. - YakovL


Nếu bạn không muốn đặt chiều rộng cố định ở bên trong div bạn có thể làm một cái gì đó như thế này:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

Điều đó làm cho bên trong div thành một phần tử nội tuyến có thể được căn giữa text-align.


1111



@SabaAhang cú pháp chính xác cho điều đó sẽ là float: none; và có lẽ chỉ cần vì #inner đã được kế thừa float của một trong hai left hoặc là right từ một nơi khác trong CSS của bạn. - Doug McLean
Đây là một giải pháp tốt đẹp. Chỉ cần ghi nhớ rằng bên trong sẽ kế thừa text-align vì vậy bạn có thể muốn đặt bên trong text-align đến initial hoặc một số giá trị khác. - pmoleri


Cách tiếp cận tốt nhất là với CSS 3.

Mô hình hộp:

#outer{
    width: 100%;

    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;

    /* Safari and Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    /* W3C */
    display: box;
    box-pack: center;
    box-align: center;
}
#inner{
    width: 50%;
}

Theo khả năng sử dụng của bạn, bạn cũng có thể sử dụng box-orient, box-flex, box-direction tính chất.

Flex:

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Đọc thêm về cách căn giữa các phần tử con

điều này giải thích tại sao mô hình hộp là cách tiếp cận tốt nhất:


299



nó cũng làm việc cho tôi khi div bên trong có float: left; - Tareq
Hãy chắc chắn rằng bạn đọc câu trả lời này trước khi bạn thực hiện giải pháp này. - cimmanon
Safari, hiện tại vẫn yêu cầu -webkit cờ cho flexbox (display: -webkit-flex; và -webkit-align-items: center; và -webkit-justify-content: center;) - Joseph Hansen


Giả sử rằng div của bạn là 200px rộng:

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

Đảm bảo phần tử gốc là định vị tức là tương đối, cố định, tuyệt đối hoặc dính.

Nếu bạn không biết chiều rộng của div, bạn có thể sử dụng transform:translateX(-50%); thay vì biên độ âm.

https://jsfiddle.net/gjvfxxdj/


216



Điều này không hoạt động trong Safari - cesards
Tôi không thích giải pháp này bởi vì khi phần tử bên trong quá rộng cho màn hình, bạn không thể cuộn qua toàn bộ phần tử theo chiều ngang. lề: 0 tự động hoạt động tốt hơn. - Aloso
tại sao bạn đặt lề trái: -100, điều này sẽ không hoạt động - Robert Limanto
Tôi đã đọc rằng đó là phương pháp duy nhất sẽ hoạt động trong IE6 / 7 - Andy
margin-left: auto; margin-right: auto; tập trung vào yếu tố mức khối - unicodexm


Tôi đã tạo điều này thí dụ để chỉ cho bạn cách theo chiều dọc và theo chiều ngang  align.

Mã cơ bản là:

#outer {
  position: relative;
}

và ...

#inner {
  margin: auto;  
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
} 

và nó sẽ ở lại center ngay cả khi bạn tái kích thước màn hình của bạn.


200



1 cho phương pháp này, tôi đã được về để trả lời với nó. Lưu ý rằng bạn phải khai báo một chiều rộng trên phần tử mà bạn muốn căn giữa theo chiều ngang (hoặc chiều cao nếu định tâm theo chiều dọc). Dưới đây là giải thích toàn diện: codepen.io/shshaw/full/gEiDt. Một trong những phương pháp linh hoạt và được hỗ trợ rộng rãi hơn của các phần tử định tâm theo chiều dọc và / hoặc theo chiều ngang. - stvnrynlds
Bạn không thể sử dụng padding trong div, nhưng nếu bạn muốn cho ảo giác sử dụng một đường viền có cùng màu. - Squirrl
Tôi nghĩ rằng phương pháp này để làm việc, bạn cần phải thiết lập với và chiều cao của div bên trong - Nicolas S.Xu


Một số áp phích đã đề cập đến cách CSS 3 để tập trung sử dụng display:box.

Cú pháp này đã lỗi thời và không nên sử dụng nữa. [Xem thêm bài này].

Vì vậy, chỉ để hoàn thành ở đây là cách mới nhất để tập trung vào CSS 3 bằng cách sử dụng Mô-đun bố cục hộp linh hoạt.

Vì vậy, nếu bạn có đánh dấu đơn giản như:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

... và bạn muốn căn giữa các mục trong hộp, dưới đây là những gì bạn cần trên phần tử gốc (.box):

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}
<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

Nếu bạn cần hỗ trợ các trình duyệt cũ hơn sử dụng cú pháp cũ hơn cho flexbox ở đây một nơi tốt để nhìn.


158



stackoverflow.com/a/10010055/1312610 - ShibinRagh
bạn có ý nghĩa gì bởi "cú pháp là lỗi thời", nó có bị phản đối không? - Konga Raju
Đặc tả Flexbox đã trải qua 3 phiên bản chính. Dự thảo gần đây nhất là từ tháng 9 năm 2012, chính thức từ chối tất cả các bản nháp trước đó. Tuy nhiên, hỗ trợ trình duyệt là điểm yếu (đặc biệt là các trình duyệt Android cũ): stackoverflow.com/questions/15662578/… - cimmanon
Điều này làm việc cho tôi trong Chrome khi phiên bản của Justin Poliey không. - Vern Jensen
@WouterVanherck nó phụ thuộc vào flex-direction giá trị. Nếu đó là 'hàng' (mặc định) - thì justify-content: center;  là cho căn chỉnh ngang (như tôi đã đề cập trong câu trả lời) Nếu đó là 'cột' - thì justify-content: center; là cho căn chỉnh theo chiều dọc. - Danield


Nếu bạn không muốn đặt chiều rộng cố định và không muốn thêm lề, hãy thêm display: inline-block với yếu tố của bạn.

Bạn có thể dùng:

#element {
    display: table;
    margin: 0 auto;
}

120



cùng yêu cầu như hiển thị: inline-block too (quirksmode.org/css/display.html) - montrealmike
Tôi đã sử dụng nó, nhưng tôi chưa bao giờ gặp display: table; trước. Nó làm gì? - Matt Cremeens


Thuộc tính sắp xếp hộp của CSS3

#outer {
    width:100%;
    height:100%;
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
}

75



Hãy chắc chắn rằng bạn đọc câu trả lời này trước khi bạn thực hiện giải pháp này. - cimmanon


Nó không thể được làm trung tâm nếu bạn không cho nó một chiều rộng, nếu không nó sẽ mất, theo mặc định toàn bộ không gian ngang.


74



và nếu bạn không biết chiều rộng? Giả sử vì nội dung động? - gman
chiều rộng tối đa? những gì về điều đó? - Will Hoskings


Định tâm một div chiều cao và chiều rộng không xác định

Theo chiều ngang và chiều dọc. Nó hoạt động với các trình duyệt hợp lý hiện đại (Firefox, Safari / WebKit, Chrome, Internet Explorer 10, Opera, v.v.)

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<div class="content">This works with any content</div>

Tinker tiếp tục Codepen hoặc trên JSBin.


74





Đặt width và thiết lập margin-left và margin-right đến auto. Đó là chỉ theo chiều ngang, Tuy nhiên. Nếu bạn muốn cả hai cách, bạn chỉ cần làm theo cả hai cách. Đừng ngại thử nghiệm; nó không giống như bạn sẽ phá vỡ bất cứ điều gì.


70