Question

我希望显示图像，使它们水平显示在同一条线上，并且距离页面中心均为50像素。当我尝试这样做时，它们出现在不同的行上，如果仔细观察，谷歌图像的右侧和英特尔图像的左侧会添加随机的空格。我在这里问了一个类似的问题： How to position elements based off the center of a page?

我的解决方案：

#image{
   padding:100px;
   background:white;
   text-align: center;
}

#google{
    display:inline-block;
    margin-right:100px;
}
#intel{
    display:inline-block;
    margin-left:100px;
}

这是jsfiddle：https://jsfiddle.net/gc3b85cv/3/

如何摆脱白色空间并将它们水平放置在同一条线上，同时确保它们距离页面中心50px（左右各个图像）。

IMAGE1<---50px--> |  <---50px--> IMAGE2

               (centre)

Answer 1

垂直对齐

我假设你想要垂直居中你的元素 - 尽管你的问题并不清楚（你提到“同一行”但它也可能意味着相同的基线）。

修复很简单：在内联块级图像上使用vertical-align: middle：

#image img { vertical-align: middle; }

空格问题

这是因为你正在使用display: inline-block，因此每个节点都将被视为内联元素，它们之间的任何空格都将被解释为空格字符（就像在文本中一样，但与块级元素不同））。

要解决此问题，您可以在父元素上使用font-size: 0 hack，但主要的缺点是，如果您在子元素中使用相对字体大小，例如em或{ {1}}，他们将计算为0。

%

请在此处查看演示小提琴：https://jsfiddle.net/teddyrised/gc3b85cv/10/

或者，您可以简单地删除元素之间的所有空格，但这会使您的标记更难以观察：

#image { font-size: 0; padding:100px; background:white; text-align: center; }

...或者如果你真的想要保留缩进，请使用<div id="image"><a href="http://www.google.ca"><img id="google" src="http://placehold.it/250x228" alt="google" style="width:250px;height:228px;" /></a><a href="http://www.intel.ca/content/www/ca/en/homepage.html"><img id="intel" src="http://placehold.it/250x100" alt="Intel Logo" style="width:250px;height:100px;" /></a></div>注释掉元素之间的空格：



Answer 2

在你的html中删除两个图像对象之间的换行符和空格。空格是一个html字符，将显示在页面上。

CSS为图像添加随机空白？

2 个答案:

垂直对齐

空格问题