Question

我有5个<a>标签，其中一个类放置了一个带有边框的框。我不得不把盒子放得很大，文本以text-align: center水平居中，而不是垂直居中。

我试过vertical-align没有成功。如何定位文本以移动到框的中间？

的 HTML 的

<a href="#" id="someid1" class="someclass">Small</a>
<a href="#" id="someid2" class="someclass">Medium</a>
<a href="#" id="someid3" class="someclass">Large</a>

等等

的 CSS 的

#container a.someclass { border:1px #ACACAC solid;text-align:center; }

Answer 1

你的盒子在哪里？您需要将每个“标记”包装在块元素中。一旦它位于块元素内，您可以使用vertical-align: middle;将其垂直居中。您还可以使用绝对位置或填充垂直居中。

<div style="vertical-align: middle;">
<a href="#">text</a>
</div>

此外，id参数是唯一的。这意味着每页只能使用一次。

Answer 2

将line-height设置为与容器的height相同的像素值。不需要padding。

Answer 3

line-height参数晃动（如果您的菜单项没有多线） - DEMO

a.someclass {
    border: 1px #ACACAC solid;
    display: inline-block;
    text-align: center;
    height: 60px;
    line-height: 60px; /* the same as the height */
    width: 150px;
}

Answer 4

使用ul和li标签以及line-height和display：block

http://jsfiddle.net/DAKfK/

href标签之间的目标文本 - CSS

4 个答案: