Html图像定心

所以我知道当只有一个图像时如何将图像居中 使用css代码块和边距，但当我这样做时，图像会彼此重叠。我可以通过留下余量：30px来硬编码边距，但是我也想考虑不同的屏幕大小会改变图像的位置。我想把它放在所有屏幕的中心

#image {
   block:
   margin:
}

---

您可以将它们保留为内联元素，并将它们包装在应用文本align:center的容器元素中。参见此。

一种简单的方法可能是将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来控制元素之间的间距

请参见演示：

这是怎么回事

这里需要的是一个块级容器，它可以收缩以适应两个徽标的宽度，而display:table可以做到这一点。然后可以应用边距：0自动将CSS表格居中

---

但是，为了防止CSS表将两个a元素包装到一个窄列中以获得最小的宽度，您需要添加空格：nowrap以使所有内联a元素保持在一行上。

您可以将图像包装在div中，然后使用float CSS属性来实现这一点：

---

你可以用吗？不太清楚那是什么。我现在正在读。简单地读一下。我不知道这会有什么影响，我问了这个问题，因为这里有很多家庭作业，学生通常不允许使用尚未涵盖的功能。我已经尝试过了。它不会居中。我知道它可以用小提琴演奏，但不会搬进去wordpress@user3281743您的主题中一定有一些相互冲突的CSS。@user3281743-将Wordpress作为标记添加到您的问题中。嗯，这似乎有效。你介意解释一下为什么@Alexander的答案不起作用吗？我发布了一个详细的解释，说明了提议的解决方案是如何工作的。

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