676

Câu hỏi này đã có câu trả lời ở đây:

Tôi đang cố gắng tập trung theo chiều ngang một thành <div>phần khối trên một trang và đặt nó ở độ rộng tối thiểu. Cách đơn giản nhất để làm điều này là gì? Tôi muốn <div>phần tử là nội tuyến với phần còn lại của trang của tôi. Tôi sẽ cố gắng rút ra một ví dụ:

page text page text page text page text
page text page text page text page text
               -------
               | div |
               -------
page text page text page text page text
page text page text page text page text
|
747

Trong trường hợp div có chiều rộng không cố định (nghĩa là bạn không biết div sẽ chiếm bao nhiêu dung lượng).

#wrapper {
  background-color: green; /* for visualization purposes */
  text-align: center;
}
#yourdiv {
  background-color: red; /* for visualization purposes */
  display: inline-block;
}
<div id="wrapper">    
    <div id="yourdiv">Your text</div>
</div>

Hãy nhớ rằng chiều rộng của #yourdivđộng -> nó sẽ phát triển và co lại để chứa văn bản bên trong nó.

Bạn có thể kiểm tra tính tương thích của trình duyệt trên Caniuse

|
559

Trong hầu hết các trình duyệt, điều này sẽ hoạt động:

div.centre {
  width: 200px;
  display: block;
  background-color: #eee;
  margin-left: auto;
  margin-right: auto;
}
<div class="centre">Some Text</div>

Trong IE6, bạn sẽ cần thêm một bên ngoài khác div:

div.layout {
  text-align: center;
}

div.centre {
  text-align: left;
  width: 200px;
  background-color: #eee;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
<div class="layout">
  <div class="centre">Some Text</div>
</div>

|
  • 1

    Có, do lỗi bố trí trong IE trước IE7, bạn phải làm điều này. Nhưng trong IE8, một văn bản đơn giản: căn chỉnh là đủ. :)

    – Hoàng Thái Bình 09:10:48 06/03/2009
  • 1

    Điều đó có nghĩa là IE8 vẫn sai, vì nó không phải là văn bản.

    – Đỗ Vũ Hồng 09:15:50 06/03/2009
  • 1

    @Antony Scott: Nó cần ở chế độ nghiêm ngặt (có bất kỳ loại tài liệu nào được khai báo).

    – Trịnh Từ Dung 10:14:42 06/03/2009
  • 1

    Ngoài ra ... chỉ hoạt động nếu bạn biết chiều rộng của container. Nếu chiều rộng thay đổi, bạn phải cập nhật CSS của mình (sẽ bốc mùi nếu nội dung được tạo động)

    – Đỗ Phương Phi 14:30:20 12/08/2011
  • 1

    Tôi khá chắc chắn rằng nó sẽ hoạt động nếu bạn không biết chiều rộng của nội dung của mình, nhưng bạn cần đặt chiều rộng thành thứ gì đó vì div sẽ mở rộng sang chiều rộng của thùng chứa.

    – Tạ Kiến Văn 15:19:40 12/08/2011
56
margin: 0 auto;

như ck đã nói , chiều rộng tối thiểu không được hỗ trợ bởi tất cả các trình duyệt

|
  • 1

    Lưu ý rằng điều này chỉ hoạt động khi phần tử cũng có widthtập thuộc tính của nó . Khi bạn muốn chiều rộng của phần tử là động (dựa trên nội dung của phần tử), hãy xem câu trả lời đã chọn.

    – Trịnh Vĩnh Sơn 00:45:01 07/03/2017
37

Tiêu đề của câu hỏi và nội dung thực sự khác nhau, vì vậy tôi sẽ đăng hai giải pháp cho việc sử dụng đó Flexbox.

Tôi đoán Flexboxsẽ thay thế / thêm vào giải pháp tiêu chuẩn hiện tại vào thời điểm IE8 và IE9 bị phá hủy hoàn toàn;)

Kiểm tra bảng tương thích Trình duyệt hiện tại cho flexbox

Yếu tố đơn

.container {
  display: flex;
  justify-content: center;
}
<div class="container">
  <img src="http://placehold.it/100x100">
</div>

Nhiều yếu tố nhưng trung tâm chỉ có một

Hành vi mặc định là flex-direction: rowsẽ sắp xếp tất cả các mục con trong một dòng duy nhất. Đặt nó thành flex-direction: columnsẽ giúp các dòng được xếp chồng lên nhau.

.container {
  display: flex;
  flex-direction: column;
}
.centered {
  align-self: center;
}
<div class="container">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
   </p>
  <div class="centered"><img src="http://placehold.it/100x100"></div>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>

|
28

CSS , HTML :

div.mydiv {width: 200px; margin: 0 auto}
<div class="mydiv">
    
    I am in the middle
    
</div>

Sơ đồ của bạn cũng hiển thị một phần tử mức khối (mà div thường là), không phải là phần tử nội tuyến.

Trên đỉnh đầu của tôi, min-widthđược hỗ trợ trong FF2 + / Safari3 + / IE7 +. Có thể được thực hiện cho IE6 bằng cách sử dụng CSS hackety hoặc một chút đơn giản của JS.

|
  • 1

    Cảm ơn đã làm rõ về thuật ngữ "nội tuyến". Tôi đã cố gắng nói rằng tôi không muốn nó nổi trên bất kỳ văn bản nào.

    – Trịnh Vĩnh Sơn 10:23:13 06/03/2009
27

Nếu các trình duyệt cũ không phải là vấn đề, hãy sử dụng HTML5 / CSS3. Nếu có, hãy áp dụng các polyfill và vẫn sử dụng HTML5 / CSS3. Tôi giả sử rằng div của bạn không có lề hoặc paddings ở đây, nhưng chúng tương đối dễ dàng để giải thích. Các mã sau.

.centered {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

Điều này làm là:

  1. Vị trí divtương đối với container của nó;
  2. Định vị divranh giới bên trái ở 50% chiều rộng của container theo chiều ngang;
  3. Dịch lại theo chiều ngang bằng 50% của các div's chiều rộng riêng .

Thật dễ dàng để tưởng tượng quá trình này để xác nhận rằng divcuối cùng sẽ được tập trung theo chiều ngang. Là một phần thưởng, bạn có thể tập trung theo chiều dọc mà không mất thêm chi phí:

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

Ưu điểm của phương pháp này là bạn không phải thực hiện bất kỳ nội dung phản trực giác nào, chẳng hạn như coi div của bạn là một văn bản sắp xếp, gói nó trong một thùng chứa bổ sung (thường vô dụng về mặt ngữ nghĩa) hoặc cho nó một chiều rộng cố định, không phải là chiều rộng cố định luôn luôn có thể

Đừng quên tiền tố nhà cung cấp transformnếu cần.

|
26
.center {
   margin-left: auto;
   margin-right: auto;
}

Chiều rộng tối thiểu không được hỗ trợ trên toàn cầu, nhưng có thể được thực hiện bằng cách sử dụng

.divclass {
   min-width: 200px;
}

Sau đó, bạn có thể đặt div của mình thành

<div class="center divclass">stuff in here</div>
|
11

Bạn nên sử dụng position: relativetext-align: centertrên phần tử cha và sau đó display: inline-blockvào phần tử con bạn muốn căn giữa. Đây là một mẫu thiết kế CSS đơn giản sẽ hoạt động trên tất cả các trình duyệt chính. Dưới đây là một ví dụ dưới đây hoặc xem ví dụ CodePen .

p {
  text-align: left;
}
.container {
  position: relative;
  display: block;
  text-align: center;
}
/* Style your object */

.object {
  padding: 10px;
  color: #ffffff;
  background-color: #556270;
}
.centerthis {
  display: inline-block;
}
<div class="container">

  <p>Aeroplanigera Mi Psychopathologia Subdistinctio Chirographum Intuor Sons Superbiloquentia Os Sors Sesquiseptimus Municipatio Archipresbyteratus O Conclusio Compedagogius An Maius Septentrionarius Plas Inproportionabilit Constantinopolis Particularisticus.</p>

  <span class="object centerthis">Something Centered</span>

  <p>Aeroplanigera Mi Psychopathologia Subdistinctio Chirographum Intuor Sons Superbiloquentia Os Sors Sesquiseptimus Municipatio Archipresbyteratus O Conclusio Compedagogius.</p>
</div>

|
9

bạn có thể sử dụng margin: 0 autotrên css của bạn thay vìmargin-left: auto; margin-right: auto;

|
7

Vui lòng sử dụng mã dưới đây và div của bạn sẽ ở trung tâm.

.class-name {
    display:block;
    margin:0 auto;
}
|
5

Nếu bạn biết chiều rộng của div và nó được cố định, bạn có thể sử dụng css sau:

margin-left: calc(50% - 'half-of-your-div-width');

trong đó 'một nửa chiều rộng của bạn' nên (rõ ràng) là một nửa chiều rộng của div của bạn.

|
5

Sau chín năm tôi nghĩ đã đến lúc mang đến một phiên bản mới. Đây là hai yêu thích của tôi (và bây giờ là một).

Ký quỹ

Đặt marginthành auto. Bạn nên biết trình tự hướng là margin: *top* *right* *bottom* *left*;hoặcmargin: *top&bottom* *left&right*

aside{
    display: block;
    width: 50px;
    height: 100px;
    background-color: green;
    float: left;
}

article{
    height: 100px;
    margin: 0 0 0 50px; /* 50px aside width */
    background-color: grey;
}

div{
  margin: 0 auto;
  display:block;
  width: 60px;
  height: 60px;
  background-color: blue;
  color: white;
}
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <aside>
        </aside>
        <article>           
                <div>The div</div>
        </article>
    </body>
</html>

Trung tâm: Không thích, đừng sử dụng cái này!

Sử dụng <center></center>các thẻ như một bọc xung quanh của bạn <div></div>.

Thí dụ:

aside{
    display:block;
    background-color:green;
    width: 50px;
    height: 100px;
    float: left;
}

center{
    display:block;
    background-color:grey;
    height: 100px;
    margin-left: 50px; /* Width of the aside */
}

div{
    display:block; 
    width: 60px; 
    height: 60px; 
    background-color:blue;
    color: white;
}
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <aside>
        </aside>
        <article>
            <center>
                <div>The div</div>
            </center>
        </article>
    </body>
</html>

|
3

Sử dụng jQuery:

$(document).ready(function() {
    $(".myElement").wrap( '<span class="myElement_container_new"></span>' ); // for IE6
    $(".myElement_container_new").css({// for IE6
        "display" : "block",
        "position" : "relative",
        "margin" : "0",
        "padding" : "0",
        "border" : "none",
        "background-color" : "transparent",
        "clear" : "both",
        "text-align" : "center"
    });
    $(".myElement").css({
        "display" : "block",
        "position" : "relative",
        "max-width" : "75%", // for example
        "margin-left" : "auto",
        "margin-right" : "auto",
        "clear" : "both",
        "text-align" : "left"
    });
});

hoặc, nếu bạn muốn tập trung mọi yếu tố với lớp ".myEuity":

$(document).ready(function() {
    $(".myElement").each(function() {
        $(this).wrap( '<span class="myElement_container_new"></span>' ); // for IE6
        $(".myElement_container_new").css({// for IE6
            "display" : "block",
            "position" : "relative",
            "margin" : "0",
            "padding" : "0",
            "border" : "none",
            "background-color" : "transparent",
            "clear" : "both",
            "text-align" : "center"
        });
        $(this).css({
            "display" : "block",
            "position" : "relative",
            "max-width" : "75%",
            "margin-left" : "auto",
            "margin-right" : "auto",
            "clear" : "both",
            "text-align" : "left"
        });
    });
});
|
3

.center {
  height: 20px;
  background-color: blue;
}

.center>div {
  margin: auto;
  background-color: green;
  width: 200px;
}
<div class="center">
  <div>You text</div>
</div>

JsFiddle

|
3

Nếu bạn <div>position: absolutenhu cầu sử dụngwidth: 100%;

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

    #child {
        display: inline-block;
    }
|

Câu trả lời của bạn (> 20 ký tự)

Bằng cách click "Đăng trả lời", bạn đồng ý với Điều khoản dịch vụ, Chính sách bảo mật and Chính sách cookie của chúng tôi.

Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ hoặc hỏi câu hỏi của bạn.