我似乎真的缺少一些关于如何使用 CSS 在屏幕上的一个块中水平排列三个图像的信息。我似乎只能将它们在页面上排成一长行（当我真的希望它们以水平线穿过屏幕时）。我的 div 哪里做错了？或者也许我在 CSS 中被引入歧途？有任何想法吗？太感谢了。
.taco_container {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: auto;
margin-right: auto;
}
<div id="taco_container">
<div class="taco">
<a href="tacogame_choose_1.html">
<img src="images/tacoone.png" style="width:304px;height:228px">
</a>
</div>
<div class="taco">
<a href="tacogame_choose_2.html">
<img src="images/tacotwo.png" style="width:304px;height:228px">
</a>
</div>
<div class="taco">
<a href="tacogame_choose_3.html">
<img src="images/tacothree.png">
</a>
</div>
</div>
你必须display项目如inline-block并设置text-align: center.
.taco_container {
width: 100%;
}
.taco {
width: 33%;
display: inline-block;
text-align: center;
}
Fiddle: http://jsfiddle.net/2xo1gr6w/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
