0

我有 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; }
4

4 回答 4

1

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

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

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

于 2012-09-26T20:56:26.807 回答
1

将 设置为与容器line-height相同的像素值。height没有padding必要。

于 2012-09-26T21:05:17.303 回答
1

参数 Rocks（如果您的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;
}
于 2012-09-26T21:07:16.690 回答
1

使用 ul 和 li 标签和 line-height 并显示：block

http://jsfiddle.net/DAKfK/

于 2012-09-26T21:14:14.710 回答