我有一个元素
<p><a href="">TITLE HERE</a></p>
我希望它有一个固定的高度,比如说100px,背景颜色是紫色。我希望其中的文本在背景的中心垂直对齐。内容将在单行文本和多行文本之间变化。
我可以height:100px; vertical-align: center;
但是如果它是单行则它不会与整个100px对齐。我可以line-height: 100px; vertical-align: center
并且文本将垂直对齐,但如果它是多行,则该框将是必要的两倍。
我无法更改html以添加额外内容或其他内容。这会让事情变得更容易。我只能改变CSS。
这可能吗?
答案 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")
居中
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;
答案 2 :(得分:0)
垂直对齐未知线数的最佳选项是使用display: table;
表示父元素,display: table-cell; vertical-align: middle;
表示子元素。
这是您的方案的示例实现。
<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;