Question

我尝试过使用左/右浮动，它们将它们放在一起，但我希望它们从左到右均匀分布。我尝试使用填充/边距标签，但它们也不起作用。任何帮助将不胜感激！

代码：

<div class="options">
 <ul style="list-style:none;">
 <li>
  <a href="http://www.cesarsway.com/askthevet/serioushealthadvice/Household-Items-That-Could-Harm-Your-Dog/"><img src="magger.jpg" width="180" height="180"/><br>&nbsp;&nbsp;&nbsp;Do Stuff To His Dog</a>
  </li>
<p>
  <li>
  <a href="http://www.facebook.com/kingwoody1/"><img src="me.jpg" width="180" height="180">    <br>Examine His Checkered Past</a></p>
 </li>

<p>
 <li>
  <a href="http://www.facebook.com/jackiewoodson528/"><img src="wife.jpg" width=180 height=180><br>Sexually Harass His Wife</a></p>
  </li>
</ul>

CSS：

 .options li {
 float:right;
 }

Answer 1

你让它复杂化了：

<强> HTML ：

<div class="images">
    <img src="1.jpg"/>
    <img src="2.jpg"/>
    <img src="3.jpg"/>
</div>

<强> CSS ：

.images {
    text-align : center;
}
.images img {
    width  : 75px;
    height : 75x;
    margin : 10px;
}

演示：http://jsfiddle.net/6VrJR/

Answer 2

将此添加到您的css代码中：

ul{
    width : 550px;
    margin: auto;
}

此处还有jsfiddle

Answer 3

不要使用花车：

不要为子元素使用浮点数，而是让它们在锚标记内部流动。锚标记具有内联作为默认显示行为（如果您需要使用其他标记，则添加display: inline;）。

使链接居中的技巧是容器text-align: center;属性。

这可以在代码中翻译如下：

定义容器类

.container {
   width: 100%;
   text-align: center;
   display: block;
   margin: auto;
}

创建HTML结构：

<div class='container'>
    <a href="#"><img src="http://www.bradfordcityfc.co.uk/images/common/bg_player_profile_default_big.png" alt=""></a>
    <a href="#"><img src="http://www.bradfordcityfc.co.uk/images/common/bg_player_profile_default_big.png" alt=""></a>
    <a href="#"><img src="http://www.bradfordcityfc.co.uk/images/common/bg_player_profile_default_big.png" alt=""></a>
</div>

演示：http://codepen.io/manuelro/pen/Abgox

此致中号

Answer 4

定义UL的宽度和自动余量。此外，为文本提供边距和文本对齐中心。

.options ul {
    width:564px;
    margin:auto;
    padding:0;
}
.options li {
    float:right;
    text-align:center;
    margin:0 4px;
}

这是jsfiddle：http://jsfiddle.net/EASFG/

无法弄清楚如何将3个图像链接并排放置并居中

4 个答案: