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

您可以通过更改每个css标记的宽度来编辑img和文本的宽度。

        div.img_section {
        vertical-align: top;
        display: inline-block;
        text-align: center;
        width: 150px;
    }
    img {
        width: 150px;
        height: 100px;
        background-color: red;
    }
    .text {
        display: block;
    }

  <div class="img_section">
            <img src=""/>
            <p class="text">text below img here<p>
        </div>

希望这会有所帮助，img有宽度和高度因为我实际上没有图像，所以它只是一个带背景的div。

Answer 2

尝试将text-align: center;应用于<p>代码并为其指定宽度（确保您的部分也有宽度）。

另外，不相关的，你不应该需要那些<br>标签。清除你在CSS中的浮动。我已经包含了内联样式来演示：

＆＃13;

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

＆＃13;

Answer 3

这是我认为你可以合理地使用表格表来帮助布局的那些场合之一 - （其他人可能不同意）：

第一个表格行包含图片，图片，图片，第二行包含desc，desc，desc。

这提供了一个简单的解决方案。

对于那些不喜欢这个想法的人，你可以通过设置显示的2个div来实现相同的效果：table每个包含3个带显示的div：table-cell。您需要设置text-align：center（表格中的表格单元格会自动执行此操作）。

其他解决方案可用...请参阅flexbox

将图像置于图像下方

3 个答案: