theo dõi

Gần nhất :

Tags

Thống kê câu hỏi

Chuyên mục : Lập trình
Topic : Html & Css
Hỏi lúc:
Lượt xem: 3,960

Làm thế nào căn giữa theo chiều ngang thẻ div trong một thẻ div?

Huỳnh Hoài Giang Huỳnh Hoài Giang
 11  01  01
11 bình chọn hữu ích bởi Vũ Tấn Đạt, Đỗ Như Bảo Phạm Mạnh Trường ... (tất cả)

Làm thế nào tôi có thể căn giữa theo chiều ngang một thẻ div trong một thẻ div sử dụng CSS. Các div bên ngoài có chiều rộng 100%:

<div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>
3,960 xem 18 theo dõi 11 hữu ích hỏi –

Bạn biết ai đó có thể trả lời câu hỏi này?. Bạn có thể giúp đỡ bằng cách tìm những người giỏi nhất:

user user user user user

Hoàng Quốc Huy Hoàng Quốc Huy
 09  00  01
09 bình chọn hữu ích bởi Lê Thục Khuê, Đặng Đạt Uy Phạm Công Án ... (tất cả)

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

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

Tất nhiên, bạn không cần phải thiết lập chiều rộng tới 50%. Bất kỳ chiều rộng nhỏ hơn chứa div sẽ làm việc. Các margin: 0 auto là căn dòng thực sự.

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

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

Nó sẽ làm cho các  phần tử bên trong căn giữa theo chiều ngang và nó hoạt động mà không cần thiết lập chiều rộng cụ thể.

3,718 xem 09 hữu ích trả lời –
Phạm Minh Châu Phạm Minh Châu
 03  02  01
03 bình chọn hữu ích bởi Tạ Duy Thông, Hồ Thiên Thư Hồ Bửu Chưởng

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

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}
3,716 xem 03 hữu ích trả lời –
Huỳnh Huệ Phương Huỳnh Huệ Phương
 06  01  01
03 bình chọn hữu ích bởi Võ Diễm Quỳnh, Trần Bửu Chưởng Hồ Thành Gia

Nếu bạn không muốn thiết lập chiều rộng cố định trên div bên trong 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;
}

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

3,717 xem 03 hữu ích trả lời –
Trần Ðức Siêu Trần Ðức Siêu
 02  00  02
02 bình chọn hữu ích bởi Đỗ Thành Sang Hoàng Ngọc Tâm

CSS3:

#outer {
    width:100%;
    height:100%;
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
}
3,714 xem 02 hữu ích trả lời –
Lý Kim Bảo Lý Kim Bảo
 02  00  02
02 bình chọn hữu ích bởi Hồ Minh Huy Dương Mỹ Dung
.outer {
    overflow: hidden;
}
.center-helper {
    float: left;
    position: relative;
    left: 50%;
}
.inner {
    float: left;
    position: relative;
    left: -50%;
}
3,711 xem 02 hữu ích trả lời –
Đỗ Tố Uyên Đỗ Tố Uyên
 05  00  02
02 bình chọn hữu ích bởi Ngô Kim Oanh Võ Nhật Minh

Firefox & Chrome:

<div style="width:100%;">
    <div style="width: 50%; margin: 0px auto;">
    </div>
</div>

IE, Firefox & Chrome:

<div style="width:100%; text-align:center;">
    <div style="width: 50%; margin: 0px auto; text-align:left;">
    </div>
</div>
3,712 xem 02 hữu ích trả lời –
Nguyễn Hàm Ý Nguyễn Hàm Ý
 02  00  01
02 bình chọn hữu ích bởi Hồ Ngọc Tùng Phạm Minh Nhi

Html:

<div class="holder">
   <div class="wrapper">
      <div class="content">
         ... div 200px*100px on center ...
      </div>
   </div>
</div>

Css:

.holder {
    position: relative;
    width: 500px;
    height: 400px;
    background: #ff00ff;
}

.wrapper {
    position: absolute;
    width: 200px;
/* this is size range */
    height: 100px;
    left: 50%;
    top: 50%;
    visibility: hidden;
}

.content {
    position: absolute;
/*relative absolute */
    width: 100%;
    height: 100%;
    left: -50%;
    top: -50%;
    visibility: visible;
    border: 1px solid;
}
3,713 xem 02 hữu ích trả lời –
Nguyễn Thùy Như Nguyễn Thùy Như
 02  00  01
02 bình chọn hữu ích bởi Đặng Liên Chi Phan Hữu Trung

box model:

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

Bạn cũng có thể sử dụng box-orient, box-flex, box-direction

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
3,715 xem 02 hữu ích trả lời –