Question

我正在尝试创建一个应该可点击的方框，并将用户引导到另一个页面。为此，并在以后添加一些悬停效果，我正在使用＆lt; a＆gt;元件。

这是html-markup：

<a id="about" href="">
    <p>About Me</p>
</a>

以下是元素的CSS标记：

a#about {
    display: block;
    width: 300px;
    height: 300px;
    border: 1px solid black;
    }

现在，我可以使用text-align属性水平居中文本而不会出现问题。但是，我还没有找到一种如何垂直居中文本的方法。

我厌倦了使用边距和填充，但它们只会改变包含框的宽度。

你们有什么建议吗？

谢谢！

Answer 1

如果文字只有一行高，请设置line-height:300px以匹配元素的高度。

Answer 2

试试这个：

a#about {
    display: table-cell;
    vertical-align: middle;
}
p {
    text-align: center;
}

demo

Answer 3

像这样

<强> DEMO

<强> CSS

a#about {
    display: table-cell;
    width: 300px;
    height: 300px;
    border: 1px solid black;
    vertical-align:middle;

    }
p{
    text-align:center;

}

Answer 4

你去吧 http://jsfiddle.net/tMfA7/

a#about {
display: block;
width: 300px;
height: 300px;
line-height:300px;
border: 1px solid black;
text-align:center;
margin:0;
}

Answer 5

的CSS：

a#about {
    display: block;
    width: 300px;
    height: 300px;
    line-height:300px;
    border: 1px solid black;
    }

注意：如果您有两行文字，那么第二行将比第一行低300px

Answer 6

为此，您可以在样式表中尝试此Css代码。

vertical-align:central;

将文字居中放在<a> box</a>中

6 个答案: