Question

所以我理解当只有一个图像时如何居中图像使用css代码block和margin但是当我这样做时，图像会变得彼此重叠。我可以通过margin-left: 30px对边距进行硬编码，但我也想考虑不同的屏幕大小会改变图像的定位方式。我想把它放在所有屏幕的中心。

#image {
   block:
   margin:
}

jsfiddle

Answer 1

您可以将它们保留为内联元素，并将它们包装在应用了text-align: center的容器元素中。请参阅此fiddle。

Answer 2

一种简单的方法可能是将a和img元素包装在包装器div中并应用以下CSS：

.wrap {
    border: 1px dotted blue;
    display: table;
    white-space: nowrap;
    margin: 0 auto;
}

您的HTML看起来像：

<div class="wrap">
<a href="http://www.commnexus.org/evonexus-companies/hush-technology/">
    <img src="http://www.hush.technology/wp-content/uploads/2014/07/evobadge.png" height="75" width="75" id="evonexus" class="evonexus">
</a>
<a href="http://www.sdvg.org/thecool2014/" style="margin-left: 20px;">
    <img src="http://www.hush.technology/wp-content/uploads/2014/07/cool-companies-2014.png" height="75" width="75" id="coolcompany" class="coolcompany">
</a>
</div>

您可以通过向第二个a（或第一个的右边距）添加左边距来控制a元素之间的间距。

请参阅演示：http://jsfiddle.net/v9LBZ/

如何运作

这里需要的是一个块级容器，它可以缩小以适应两个徽标的宽度，而display: table将会这样做。然后，您可以应用margin: 0 auto来居中CSS表。

但是，为了防止CSS表将两个a元素包装到一个窄列中（尝试获得最小宽度），您需要添加white-space: nowrap以保留所有内联{{ 1}}元素在一行上。

Answer 3

您可以将图像包装在div中，然后使用float css属性来实现此目的：

http://jsfiddle.net/b7TQs/1/

.left, .right{
    width: 50%;
    text-align: center;
}
.left {
    float: left;
}
.right {
    float: right;
}

Html图像居中

3 个答案: