Làm cách nào để căn chỉnh văn bản trực tiếp bên dưới hình ảnh?

Question

Tôi đã từng biết cách đặt một hình ảnh lên trên và sau đó biện minh cho văn bản bên dưới hình ảnh để nó nằm trong đường viền của chiều rộng của hình ảnh. Tuy nhiên, bây giờ tôi không có ý tưởng làm thế nào để làm điều này. Làm thế nào điều này được thực hiện?

Answer 1

này tập trung "A" bên dưới hình ảnh:

<div style="text-align:center"> 
    <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/opentoselect.gif" /> 
    <br /> 
    A 
</div> 

Đó là ASP.Net và nó sẽ làm cho HTML như:

<div style="text-align:center"> 
<img id="Image1" src="Images/opentoselect.gif" style="border-width:0px;" /> 
<br /> 
A 
</div> 

Answer 2

HTML của bạn:

<div class="img-with-text"> 
    <img src="yourimage.jpg" alt="sometext" /> 
    <p>Some text</p> 
</div> 

Nếu bạn biết chiều rộng của hình ảnh, CSS của bạn:

.img-with-text { 
    text-align: justify; 
    width: [width of img]; 
} 

.img-with-text img { 
    display: block; 
    margin: 0 auto; 
} 

Nếu không, văn bản của bạn bên dưới hình ảnh sẽ tự do lưu chuyển. Để ngăn chặn điều này, chỉ cần đặt chiều rộng cho vùng chứa của bạn.

Answer 3

Để có thể biện minh cho văn bản, bạn cần biết chiều rộng của hình ảnh. Bạn chỉ có thể sử dụng chiều rộng bình thường của hình ảnh, hoặc sử dụng một chiều rộng khác nhau, nhưng IE 6 có thể nhận được cáu kỉnh ở bạn và không quy mô.

Dưới đây là những gì bạn cần:

<style type="text/css"> 
#container { width: 100px; //whatever width you want } 

#image {width: 100%; //fill up whole div } 

#text { text-align: justify; }  
</style> 

<div id="container"> 
    <img src="" id="image" /> 
    <p id="text">oooh look! text!</p> 
</div> 

Answer 4

Bạn có thể sử dụng HTML5 <figcaption>:

<figure> 
    <img src="img.jpg" alt="my img"/> 
    <figcaption> Your text </figcaption> 
</figure> 

Working example.