Как я могу выровнять текст прямо под изображением? - PullRequest
Новая
       46

Как я могу выровнять текст прямо под изображением?

37 голосов
/ 04 августа 2009

Раньше я знал, как поместить изображение сверху, а затем выровнять текст под изображением так, чтобы оно не выходило за границы ширины изображения. Однако сейчас я понятия не имею, как это сделать. Как это достигается?

Ответы [ 4 ]

55 голосов
/ 04 августа 2009

Ваш 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;
}

В противном случае ваш текст под изображением станет свободным. Чтобы предотвратить это, просто установите ширину вашего контейнера.

35 голосов
/ 16 мая 2015

Вы можете использовать HTML5 <figcaption>: 

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

Рабочий пример .

4 голосов
/ 04 августа 2009

Для того, чтобы можно было выровнять текст, вам нужно знать ширину изображения. Вы можете просто использовать обычную ширину изображения или использовать другую ширину, но 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>
0 голосов
/ 04 августа 2009

Это центрирует «А» под изображением: 

<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>
...