html - 图片下方居中文字

Question

我有三个图像部分:

img section{
	float:left;
	text-align:center;
}
img section two{
	float:center;
	text-align:center;
	}
img section three
	float:right;
	text-align:center;
	}
	

并且我尝试将 text-align:center 放在所有它们上，但它不会居中。

http://i.stack.imgur.com/cgK2B.png

这是我试图居中的其中一个文本的图像。

HTML:

<section class ="img_section">
<div>
<img src="images/cafepicture.png" alt="Cafe Inside"> 
<br>
<p>insert text</p><br>
</div>
</section>

我对 html 毫无用处，所以任何帮助都会很棒

Answer 1

尝试申请 text-align: center;到 <p>标记并给它一个宽度(确保你的部分也有宽度)。

此外，无关的，你不应该需要那些<br>标签。也清除 CSS 中的 float 。我已经包含了内联样式来演示:

<section class="img_section" style="width: 150px;">
  <img src="images/cafepicture.png" alt="Cafe Inside"> 
  <p style="width: 100%; text-align: center; clear: left;">insert text</p>
</section>