为什么不是这些元素与显示：inline-block的正确对齐？ [英] Why aren't these elements with display:inline-block properly aligned?

问题描述

我有一个显示设置为 inline-block的的链接，并在它旁边是一个＆LT; D​​IV＆GT; 具有相同的高度。但是，＆LT; D​​IV＆GT; 莫名其妙地泛起抵消向下，我不知道为什么。

I have a link with display set to inline-block, and next to it is a <div> with the same height. However, the <div> is somehow appearing offset downwards, and I'm not sure why.

下面是一个的jsfiddle： http://jsfiddle.net/2bWjx/1/

Here's a jsFiddle: http://jsfiddle.net/2bWjx/1/

#stats （灰色）的出现比低下来a.sector一个字母。

#stats 同样应设置（顶部和底部在同一地点）的 a.sector一个字母。

#stats should be equally set (top and bottom at the same point) as a.sector one-letter.

我一直挣扎着这一段时间，并且可以使用一些帮助。应该是一个简单的解决！

I've been struggling with this for a while, and could use some help. Should be a simple fix!

感谢提前任何帮助！

推荐答案

您需要添加垂直对齐：顶部到任何具有显示： inline-block的。

You need to add vertical-align: top to whatever has display: inline-block.

查看： http://jsfiddle.net/thirtydot/2bWjx/2/

默认垂直对齐是基线，这将导致你所看到的问题。

The default vertical-align is baseline, which causes the problem you're seeing.

您可以在这里看到的各种可能值之间的差异：<一href="http://www.brunildo.org/test/inline-block.html">http://www.brunildo.org/test/inline-block.html

You can see the difference between the various possible values here: http://www.brunildo.org/test/inline-block.html

这篇关于为什么不是这些元素与显示：inline-block的正确对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！