định tâm văn bản theo chiều ngang qua hình ảnh qua CSS

Question

Cân nhắc html sau:

<div class="image"> 
    <img src="sample.png"/> 
    <div class="text"> 
     Text of variable length 
    </div> 
</div> 

đâu:

.image { 
    position:relative; 
    text-align:center; // doesn't work as desired :(
} 

.text { 
    position:absolute; 
    top:30px; 
} 

Bạn có thể xin vui lòng cho, nếu có một cách để ngang align văn bản ở trung tâm của .image div? Tôi không thể sử dụng left bất động sản, vì chiều dài của văn bản là không rõ và các text-align tài sản không hoạt động cho div .text :(

Cảm ơn bạn.

Answer 1

Thử CSS sau:

.image { 
    position:relative; 
} 

.text { 
    left: 0; 
    position:absolute; 
    text-align:center; 
    top: 30px; 
    width: 100% 
} 

Answer 2

Bạn có thể không sử dụng hình ảnh như hình nền của div 'image' sử dụng background-image: url ('/ yourUrl /'), và sau đó thay vì có văn bản trong div riêng của nó, chỉ cần đặt nó vào div hình ảnh và sau đó áp dụng text-align: center;

Answer 3

Trước tiên, bạn cần phao phần tử .image, để 'thu gọn' con cháu cấp khối của nó theo chiều rộng của phần tử và sau đó sử dụng text-align trên .text phần tử:

.image { 
    float: left; 
} 
.text { 
    text-align: center; 
} 

JS Fiddle demo.

Hoặc bạn chỉ có thể cung cấp cho nó một display: inline-block, mà sẽ cho phép nó có nội dung khối cấp của nó chứa đựng, và duy trì trong dòng chảy tài liệu:

.image { 
    display: inline-block; 
} 
.text { 
    text-align: center; 
} 

JS Fiddle demo.

Answer 4

Hãy thử điều này:

.image { 

    position:relative; 
} 

.text { 
    width:100%; 

    height:100%; 
    position: absolute; 
    top: 0; 
    left: 0px; 
    justify-content: center; 
    flex-direction: column; 
    align-items: center; 
    display: flex; 
}