đặt giữa một hộp div ở giữa trang bằng css

Tôi muốn căn giữa một quyền div ở giữa trang, tôi đã thử top:30%, nhưng khi cửa sổ được thay đổi kích thước khỏi căn chỉnh.đặt giữa một hộp div ở giữa trang bằng css

<div id=cent></div>

Cảm ơn Jean

Nguồn

2010-03-23 X10nD

Loại câu hỏi này cần một số mã mẫu nếu một số cố gắng trả lời ... Nếu không có ý tưởng về cách div được định vị trong các yếu tố cha mẹ và anh chị em của nó, không có cách nào để hiểu vấn đề của bạn .. chúc mừng ..! – SpikETidE

Nó chỉ là một div đơn giản không có cha mẹ hoặc con – X10nD

<div id="content" 
       style="text-align: center; 
       vertical-align: middle; 
       border-color: #000000; 
       border-width: 1px; 
       border-style: solid; 
       margin-top: 25%; 
       margin-bottom: 25%;"> 
       hi 
      </div>

này làm việc cho tôi ...

Chỉnh sửa: Điều này sẽ sắp xếp toàn bộ div ... không phụ thuộc vào kích thước của div hoặc trang. .. Giả sử rằng id này là div duy nhất trong toàn bộ trang ...

Nguồn

2010-03-23 06:48:00 SpikETidE

Tôi chỉ cần căn chỉnh div không phải là văn bản – X10nD

Nếu bạn biết chiều cao/chiều rộng của div đó (ví dụ, nó sẽ là 100px X 200px) thì bạn có thể làm như sau:

#cent { 
    position:absolute; 
    top:50%; 
    left:50%; 
    margin-top:-50px; /* this is half the height of your div*/ 
    margin-left:-100px; /*this is half of width of your div*/ 
}

UPDATE: tùy chọn khác: xem http://www.w3.org/Style/Examples/007/center (Định tâm theo chiều dọc)

Nguồn

2010-03-23 06:48:01 naivists

Không phân biệt kích thước của div, nó cần phải được căn chỉnh – X10nD

Ngoài ra, hãy xem liên kết trong câu trả lời cập nhật của tôi – naivists

+1 cho link ... display: table-cell là một cái gì đó mới với tôi ....! – SpikETidE

Thêm ghi chú để liên kết naivists' (để w3c trang web lời khuyên): display:table-cell không làm việc với height:100%. Vì vậy, nếu bạn muốn căn giữa phần tử mà bạn không biết chiều cao của nó, trên một trang, bạn cần đặt nó vào trong một vùng chứa với display:table và height:100% và một vùng chứa khác với display:table-cell và vertical-align:middle.

Hơn nữa, nếu bạn muốn căn giữa theo chiều ngang, bạn cần chỉ định width:100% cho thân, hộp chứa bên ngoài và cung cấp text-align:center cho vùng chứa bên trong. Nội dung phải có display:inline-block và để đặt lại căn chỉnh, text-align:left.

Cuối cùng, nó trở nên như sau:

<style> 
#vcontainer { 
    display: table; 
    height: 100%; 
    width: 100%; 
} 
#hcontainer { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 
#content { 
    display: inline-block; 
    border: lightGray 1px solid; 
    background-color: lightBlue; 
    text-align: left; 
} 
</style> 
<body> 
    <div id="vcontainer"><div id="hcontainer"> 
    <div id="content"> 
     Hoyjo!<br> 
     I have returned to my hometown!<br> 
     Lolololo lololo lololo lololo lololo!<br> 
    </div> 
    </div></div> 
</body>

tôi không thể đảm bảo nó sẽ làm việc trên các trình duyệt di sản (IE6/7). Nó sẽ hoạt động trên IE8 với điều kiện nó chạy trên các tiêu chuẩn IE8 (vâng, điều này sẽ làm hỏng tâm trí bạn. Cảm ơn, MS!), Và bạn phải cung cấp cho <html> và <body> số height:100%.

Nguồn

2010-08-03 22:18:47 syockit

Đây là cách:

#cent 
{ 
    margin-left:50px; 
    margin-right:50px; 
}

Bây giờ div của bạn sẽ được 50px từ trái và bên phải và tập trung vào bất cứ điều gì chứa bạn có nó trong

Nguồn

2010-08-03 22:21:50

-2

position: absolute; 
top: 0; 
right: 0; 
bottom: 0; 
left: 0; 
margin: auto;

Nguồn

2014-06-10 14:50:58 Hobby99

HTML:.

<div id="box"></div>

CSS:

#box{ 
background-color: green; 
width:100px; 
height:100px; 
margin:auto; /*you only need this part to center*/ 
}

Whatch ra khỏi dấu ngoặc kép hoặc dấu ngoặc kép xung quanh id "box", bạn cần chúng.

Nguồn

2017-07-24 10:33:54

đặt giữa một hộp div ở giữa trang bằng css

Trả lời

Các vấn đề liên quan