Раньше я знал, как поместить изображение сверху, а затем оправдывать текст под изображением, чтобы он оставался в пределах ширины изображения. Однако сейчас я понятия не имею, как это сделать. Как это достигается?
Как я могу выровнять текст непосредственно под изображением?
Ответ 1
Ваш HTML:
<div class="img-with-text">
<img src="yourimage.jpg" alt="sometext" />
<p>Some text</p>
</div>
Если вы знаете ширину своего изображения, ваш CSS:
.img-with-text {
text-align: justify;
width: [width of img];
}
.img-with-text img {
display: block;
margin: 0 auto;
}
В противном случае текст под изображением будет свободным. Чтобы предотвратить это, просто установите ширину в свой контейнер.
Ответ 2
Вы можете использовать HTML5 <figcaption>
:
<figure>
<img src="img.jpg" alt="my img"/>
<figcaption> Your text </figcaption>
</figure>
Ответ 3
Чтобы иметь возможность обосновать текст, вам нужно знать ширину изображения. Вы можете просто использовать обычную ширину изображения или использовать другую ширину, но IE 6 может стать неуклюжим для вас, а не масштабироваться.
Вот что вам нужно:
<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>
Ответ 4
Это центрирует "A" под изображением:
<div style="text-align:center">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/opentoselect.gif" />
<br />
A
</div>
Это ASP.Net, и он отобразит HTML как:
<div style="text-align:center">
<img id="Image1" src="Images/opentoselect.gif" style="border-width:0px;" />
<br />
A
</div>