Nội dung trung tâm CSS bên trong div

Question

Tôi cần phải căn giữa nội dung html bên trong một lớp div = "đối tác" (div trên cùng có 2 hình ảnh). Như bạn có thể nhìn thấy từ hình ảnh dưới đây (nó nổi trái thay vì trung tâm của div):

Đây là mã html của tôi:

<div id="partners"> 
    <div class="wrap clearfix"> 
     <h2>Partnertnerzy serwisu:</h2> 
     <ul> 
      <li><a href="http://www.dilbert.com/"><img width="56" height="16" alt="Parnter bar wika" src="/as/partners/wika.png"></a></li>  
      <li><a href="http://www.youtube.com><img width="65" height="15" alt="Parnter bar siemens" src="/as/partners/siemens.png"></a></li>  
     </ul> 
     <a class="linkClose" href="/firmy?clbp=1">Zamknij </a> 
    </div> 
</div> 

Ảnh:

CSS:

#partners, #top { 
    position: relative; 
    z-index: 100; 
} 
#partners { 
    margin: 12px 0 3px; 
    text-align: center; 
} 
.clearfix:after, .row:after { 
    clear: both; 
    content: "."; 
    display: block; 
    height: 0; 
    visibility: hidden; 
} 
#partners .wrap { 
    width: 655px; 
} 
.wrap { 
    margin: 0 auto; 
    position: relative; 
    width: 990px; 
} 
#partners h2 { 
    color: #A6A5A5; 
    float: left; 
    font-weight: normal; 
    margin: 2px 15px 0 0; 
} 
#partners ul { 
    float: left; 
} 
ul { 
    list-style-position: outside; 
    list-style-type: none; 
} 

Answer 1

To center div, thiết lập chiều rộng của nó thành một số giá trị và thêm margin: auto.

#partners .wrap { 
    width: 655px; 
    margin: auto; 
} 

EDIT, bạn muốn căn giữa nội dung div chứ không phải chính div. Bạn cần thay đổi thuộc tính hiển thị của h2, ul và li đến inline và xóa float: left.

#partners li, ul, h2 { 
    display: inline; 
    float: none; 
} 

Sau đó, chúng sẽ được bố trí như các phần tử văn bản thông thường và căn chỉnh theo thuộc tính căn chỉnh văn bản của vùng chứa, đó là những gì bạn muốn.

Answer 2

Vấn đề là bạn đã gán chiều rộng cố định cho DIV .wrap của bạn. Bản thân DIV là trung tâm (bạn có thể thấy rằng khi bạn thêm đường viền vào nó) nhưng DIV chỉ là quá rộng. Nói cách khác, nội dung không lấp đầy toàn bộ chiều rộng của DIV.

Để giải quyết vấn đề bạn phải đảm bảo, rằng DIV .wrap chỉ rộng bằng nội dung của nó.

Để đạt được điều đó bạn cần phải loại bỏ các nổi trong các yếu tố nội dung và thiết lập display tài sản của các yếu tố nồng độ khối inline:

#partners .wrap { 
display: inline; 
} 

.wrap { margin: 0 auto; position: relative;} 

#partners h2 { 
color: #A6A5A5; 
font-weight: normal; 
margin: 2px 15px 0 0; 
display: inline; 
} 

#partners ul { 
display: inline; 
} 

#partners li {display: inline} 

ul { list-style-position: outside; list-style-type: none; } 

Answer 3

làm như thế này:

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

Answer 4

Có nhiều cách để căn giữa mọi phần tử. Tôi đã liệt kê một số

1. Đặt chiều rộng thành một số giá trị và thêm lề: 0 tự động.

.partners { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
}

---

2. Chia thành bố cục 3 cột

.partners { 
 
    width: 80%; 
 
    margin-left: 10%; 
 
}

---

3. Sử dụng bootstrap bố trí

<div class="row"> 
 
    <div class="col-sm-4"></div> 
 
    <div class="col-sm-4">Your Content/Image here</div> 
 
</div>

Answer 5

Hãy thử sử dụng flexbox. Ví dụ: mã sau đây hiển thị CSS cho div vùng chứa bên trong nội dung cần căn giữa:

.absolute-center { 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -ms-flex-align: center; 
    -webkit-align-items: center; 
    -webkit-box-align: center; 

    align-items: center; 

}