如何将文本垂直居中在固定高度内,无论它是一行还是两行?

时间:2017-02-14 17:11:48

标签: html css css3

我有一个元素

<p><a href="">TITLE HERE</a></p>

我希望它有一个固定的高度,比如说100px,背景颜色是紫色。我希望其中的文本在背景的中心垂直对齐。内容将在单行文本和多行文本之间变化。

我可以height:100px; vertical-align: center;但是如果它是单行则它不会与整个100px对齐。我可以line-height: 100px; vertical-align: center并且文本将垂直对齐,但如果它是多行,则该框将是必要的两倍。

我无法更改html以添加额外内容或其他内容。这会让事情变得更容易。我只能改变CSS。

这可能吗?

3 个答案:

答案 0 :(得分:1)

使用flexbox

p {
  height: 100px;
  border: 1px solid black;
  display: flex;
  justify-content: center;      /*  horizontal  */
  align-items: center;          /*  vertical    */
}
<p><a href="">TITLE HERE</a></p>
<p><a href="">TITLE<br>HERE</a></p>

table

p {
  height: 100px;
  width: 100%;
  border: 1px solid black;
  display: table;
}
p a {
  display: table-cell;
  text-align: center;              /*  horizontal  */
  vertical-align: middle;          /*  vertical    */
}
<p><a href="">TITLE HERE</a></p>
<p><a href="">TITLE<br>HERE</a></p>

答案 1 :(得分:1)

使用timeout := time.Duration(1 * time.Second) client := http.Client{ Timeout: timeout, } resp, err := client.Get("http://google.com") 居中

&#13;
&#13;
transform
&#13;
p {
  background-color: purple;
  color: white;
  height: 100px;
  position: relative;
  text-align: center;
}

a{
  color: white;
  text-decoration: none;
  position: absolute;
  width: 100%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  
}
&#13;
&#13;
&#13;

答案 2 :(得分:0)

垂直对齐未知线数的最佳选项是使用display: table;表示父元素,display: table-cell; vertical-align: middle;表示子元素。

这是您的方案的示例实现。

&#13;
&#13;
<html>

<head>
    <style>
        .wrapper {
            height: 100px;
            width: 300px;
            background: purple;
            display: table;
        }
        
        .wrapper .textcontent {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        
        .wrapper a {
            color: #ffffff;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="textcontent">
            <p><a href="">TITLE HERE</a></p>
            <p><a href="">Some Other text here</a></p>
        </div>
    </div>
</body>

</html>
&#13;
&#13;
&#13;

您可以找到有关此实施的更多详细信息here。此方案的详细示例参考here