CSS垂直对齐块或行内块锚点元素的中心

约翰

我正在使用的菜单高度为40px,并设置display: inline-block为使其易于单击。但是,我无法使文本垂直对齐中间。

面临的挑战是要vertical-align: middle使用tabledisplay属性的任何相关值的情况下显示文本,同时又要使用属性的任何相关值,这很便宜,我正在尝试确定如何以可承受的价格做到这一点。

这是我目前拥有的...

XHTML

<div id="menu">
<div><a class="menu" href="blog/" tabindex="2">Blog</a></div>
<div><a class="menu" href="contact/" tabindex="2">Contact</a></div></div>
</div>

的CSS

#menu {height: 40px;}
#menu > div {display: block; float: left; height: 100% !important;}
#menu > div > a {color: #fff; height: 40px; display: inline-block !important; text-align: center; vertical-align: middle; width: 100px;}
哈利

分配一个line-height等于该框的框,height以使其垂直于中间对齐。

#menu > div > a {
    color: #000;
    height: 40px;
    display: inline-block !important;
    text-align: center;
    vertical-align: middle;
    width: 100px;
    line-height: 40px; /* added this line */
}

演示版

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

垂直对齐块元素

来自分类Dev

内联块div中的垂直对齐范围文本

来自分类Dev

垂直对齐两个内联块元素

来自分类Dev

将TD中的PRE块垂直对齐到“顶部”

来自分类Dev

块内的行内块元素的垂直对齐

来自分类Dev

内联块元素的页边距奇怪,无法在其中垂直对齐元素

来自分类Dev

在响应方块中垂直对齐文本块

来自分类Dev

使用内联块垂直对齐3格

来自分类Dev

垂直对齐在行内块中不起作用

来自分类Dev

如何基于特定线垂直对齐行内块元素,而忽略其他行?

来自分类Dev

如何像Pinterest中那样垂直对齐内联块?

来自分类Dev

避免垂直对齐:容纳块的中间延伸高度

来自分类Dev

内联块容器中的垂直对齐

来自分类Dev

显示内联块元素不会垂直对齐

来自分类Dev

内联块元素不与省略号垂直对齐

来自分类Dev

内联块div的垂直对齐错误

来自分类Dev

两个内联块div的垂直对齐

来自分类Dev

使用CSS在锚点内垂直对齐图像

来自分类Dev

如何将文本与行内块元素垂直居中对齐

来自分类Dev

垂直对齐在行内块中不起作用

来自分类Dev

内联元素的垂直对齐并消除内联块元素之间的空间

来自分类Dev

CSS垂直对齐和内联块问题

来自分类Dev

显示内联块元素不会垂直对齐

来自分类Dev

垂直对齐适用于应用于或其他行内块元素的元素吗?

来自分类Dev

容器中的CSS垂直对齐块

来自分类Dev

内联块div的垂直对齐边界

来自分类Dev

内联块的CSS垂直对齐不起作用

来自分类Dev

Div内联块垂直对齐吗?

来自分类Dev

如何使块元素垂直对齐?