文本对齐不适用于垂直对齐
text-align not working with vertical-align
我有 6 个 div,每个包含一个 <p>
和一个 link,我希望它们都居中,<p>
在顶部,link 在底部。这是我的 html(所有 6 个基本相同):
<div id="home">
<p>P</p>
<a class="nav" href="index.html">home</a>
</div>
(所有 6 个都包裹在一个 <header>
中)
这是我的 css:
header div {
width: 133.33px;
height: 145px;
text-align: center;
font-size: 18px;
padding-bottom: 3px;
font-weight: lighter;
float: left;
display: table;
}
header div a {
text-decoration: none;
color: #474747;
vertical-align: bottom;
text-align: center;
display: table-cell;
}
header div p {
font-size: 60px;
padding: 0;
text-align: center;
vertical-align: top;
display: table-cell;
}
我无法让 text-align: center
与 vertical-align
同时工作。有没有办法在不使用 vertical-align
的情况下获得 top/bottom 定位,或者让 text-align
工作?
我希望这是您要找的代码:(这些不是您要找的机器人)
.wrapper {
text-align: center;
height: 200px;
width: 200px;
border: 1px solid black;
display: table;
}
.container {
display: table-cell;
vertical-align: bottom;
}
<div class="wrapper">
<div class="container">
<p>Hello World!</p>
<a href="#">I am a Link!</a>
</div>
</div>
根据 Alohci 的评论,如果您想要顶部的 <p>
标签和底部的 <a>
标签,您应该使用 position
属性,如下所示:
.wrapper {
position: relative;
text-align: center;
height: 200px;
max-height: 200px;
width: 200px;
max-width: 200px;
border: 1px solid black;
display: table;
}
.container p {
display: inline;
vertical-align: top;
}
.container a {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
<div class="wrapper">
<div class="container">
<p>Hello World!</p>
<a href="#">I am a Link!</a>
</div>
</div>
使用关注 CSS,
你可以让 <p>
和 link 都居中,
div {
width: 133.33px;
height: 145px;
text-align: center;
font-size: 18px;
padding-bottom: 3px;
font-weight: lighter;
float: left;
display: table;
}
div a {
text-decoration: none;
color: #474747;
vertical-align: middle;
display: table-cell;
}
div p {
font-size: 60px;
padding: 0;
text-align: center;
}
这是 Jsfiddle 解决方案 link。
我有 6 个 div,每个包含一个 <p>
和一个 link,我希望它们都居中,<p>
在顶部,link 在底部。这是我的 html(所有 6 个基本相同):
<div id="home">
<p>P</p>
<a class="nav" href="index.html">home</a>
</div>
(所有 6 个都包裹在一个 <header>
中)
这是我的 css:
header div {
width: 133.33px;
height: 145px;
text-align: center;
font-size: 18px;
padding-bottom: 3px;
font-weight: lighter;
float: left;
display: table;
}
header div a {
text-decoration: none;
color: #474747;
vertical-align: bottom;
text-align: center;
display: table-cell;
}
header div p {
font-size: 60px;
padding: 0;
text-align: center;
vertical-align: top;
display: table-cell;
}
我无法让 text-align: center
与 vertical-align
同时工作。有没有办法在不使用 vertical-align
的情况下获得 top/bottom 定位,或者让 text-align
工作?
我希望这是您要找的代码:(这些不是您要找的机器人)
.wrapper {
text-align: center;
height: 200px;
width: 200px;
border: 1px solid black;
display: table;
}
.container {
display: table-cell;
vertical-align: bottom;
}
<div class="wrapper">
<div class="container">
<p>Hello World!</p>
<a href="#">I am a Link!</a>
</div>
</div>
根据 Alohci 的评论,如果您想要顶部的 <p>
标签和底部的 <a>
标签,您应该使用 position
属性,如下所示:
.wrapper {
position: relative;
text-align: center;
height: 200px;
max-height: 200px;
width: 200px;
max-width: 200px;
border: 1px solid black;
display: table;
}
.container p {
display: inline;
vertical-align: top;
}
.container a {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
<div class="wrapper">
<div class="container">
<p>Hello World!</p>
<a href="#">I am a Link!</a>
</div>
</div>
使用关注 CSS,
你可以让 <p>
和 link 都居中,
div {
width: 133.33px;
height: 145px;
text-align: center;
font-size: 18px;
padding-bottom: 3px;
font-weight: lighter;
float: left;
display: table;
}
div a {
text-decoration: none;
color: #474747;
vertical-align: middle;
display: table-cell;
}
div p {
font-size: 60px;
padding: 0;
text-align: center;
}
这是 Jsfiddle 解决方案 link。