css - HTML/CSS 图像对齐

Question

我有这个代码:

<div id="mainDiv" style="text-align:center>
<img src="redFarm.jpg" style="width: 250px">
<img src="board.jpg" style="width: 750px">
<img src="blueFarm.jpg" style="width: 250px">
</div>

棋盘图像正好位于屏幕中央。现在，另一个尽可能对齐到中心，我希望它们尽可能靠近边界(左和右)。我尝试了很多组合，但都没有成功。你们能给我指点一下吗？

谢谢

Answer 1

尝试左右浮动图像:

<div id="mainDiv" style="text-align:center">
<img src="redFarm.jpg" style="float:left; width: 250px">
<img src="board.jpg" style="width: 750px">
<img src="blueFarm.jpg" style="float: right; width: 250px">
</div>

这会将图像放在容器的顶部；如果这是一个问题，您可以尝试明确指定高度。