问题描述：
我有一些按键设置与我的HTML，使他们都是一样的高度，利用这个CSS和HTML上<a>标签垂直居中文本在HTML
ul {
\t display: table;
\t padding: 0;
\t width: 90%;
\t margin: 5% auto;
\t list-style-type: none;
\t vertical-align: middle;
\t height: 20vh;
}
li {
\t display: block;
\t float: left;
\t vertical-align: middle;
\t text-align: center;
\t width: 50%;
\t height: 100%;
\t margin-top: 15px;
\t margin-right: 0;
}
li.third {
\t vertical-align: middle;
\t text-align: center;
\t margin: auto;
\t width: 50%;
}
.ghost-button {
\t color: rgb(9, 82, 85);
\t background: rgba(255, 255, 255, 0.01);
\t border: 1px solid rgb(9, 82, 85);
\t padding: 5px 5px;
\t margin: auto;
\t display: inline-block;
\t text-decoration: none;
\t width: 100%;
\t height: 100%;
\t vertical-align: middle;
}
.third a {
\t display: block;
\t margin-left: 50%;
\t vertical-align: middle;
}
.ghost-button:hover, .ghost-button:active {
\t color: #FFF;
\t background-color: rgb(9, 82, 85);
\t text-decoration: none;
}
a {
\t text-decoration: none;
\t vertical-align: middle;
\t color: rgb(9, 82, 85);
}<ul>
<li><a class="ghost-button" class="ghost-button" href="S1A.php" class="ghost-button" >Check the newspaper classifieds
\t for affordable pieces </a></li>
<li><a class="ghost-button" class="ghost-button" href="S1B.php" class="ghost-button" >Check for garage sales within
\t walking distance </a></li>
<li class="third"><a class="ghost-button" class="ghost-button" href="S1C.php" class="ghost-button" >Do nothing</a></li>
</ul>在我页面的按钮不重叠，这是我无法弄清楚的代码片段的问题。该片段还必须全页查看，否则不会发生该问题。对不起，这是我第一次使用代码段。
我想使文本垂直对齐，正如你所看到的，除非我错误地使用它，vertical-align: middle不起作用。在.ghost按钮inline-block的到显示：
答
使用flex上的链接，并align-items: center; justify-content: center;水平和垂直居中。
ul {
display: table;
padding: 0;
width: 90%;
margin: 5% auto;
list-style-type: none;
vertical-align: middle;
height: 20vh;
}
li {
display: block;
float: left;
vertical-align: middle;
text-align: center;
width: 50%;
height: 100%;
margin-top: 15px;
margin-right: 0;
}
li.third {
vertical-align: middle;
text-align: center;
margin: auto;
width: 50%;
}
.ghost-button {
color: rgb(9, 82, 85);
background: rgba(255, 255, 255, 0.01);
border: 1px solid rgb(9, 82, 85);
padding: 5px 5px;
margin: auto;
text-decoration: none;
width: 100%;
height: 100%;
}
.third a {
margin-left: 50%;
}
.ghost-button:hover,
.ghost-button:active {
color: #FFF;
background-color: rgb(9, 82, 85);
text-decoration: none;
}
a {
text-decoration: none;
color: rgb(9, 82, 85);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}<ul>
<li><a class="ghost-button" class="ghost-button" href="S1A.php" class="ghost-button">Check the newspaper classifieds
\t for affordable pieces </a></li>
<li><a class="ghost-button" class="ghost-button" href="S1B.php" class="ghost-button">Check for garage sales within
\t walking distance </a></li>
<li class="third"><a class="ghost-button" class="ghost-button" href="S1C.php" class="ghost-button">Do nothing</a></li>
</ul>
答
可以更改显示直列弯曲，改变垂直对齐：中间到对齐项：中心
align-items是柔性盒的垂直居中。 justify-content将处理水平对齐。
ul {
\t display: table;
\t padding: 0;
\t width: 90%;
\t margin: 5% auto;
\t list-style-type: none;
\t vertical-align: middle;
\t height: 20vh;
}
li {
\t display: block;
\t float: left;
\t vertical-align: middle;
\t text-align: center;
\t width: 50%;
\t height: 100%;
\t margin-top: 15px;
\t margin-right: 0;
}
li.third {
\t vertical-align: middle;
\t text-align: center;
\t margin: auto;
\t width: 50%;
}
.ghost-button {
\t color: rgb(9, 82, 85);
\t background: rgba(255, 255, 255, 0.01);
\t border: 1px solid rgb(9, 82, 85);
\t padding: 5px 5px;
\t margin: auto;
\t display: inline-flex;
\t text-decoration: none;
\t width: 100%;
\t height: 100%;
\t align-items:center;
}
.third a {
\t display: block;
\t margin-left: 50%;
\t vertical-align: middle;
}
.ghost-button:hover, .ghost-button:active {
\t color: #FFF;
\t background-color: rgb(9, 82, 85);
\t text-decoration: none;
}
a {
\t text-decoration: none;
\t vertical-align: middle;
\t color: rgb(9, 82, 85);
}<ul>
<li><a class="ghost-button" href="S1A.php" >Check the newspaper classifieds
\t for affordable pieces </a></li>
<li><a class="ghost-button" href="S1B.php">Check for garage sales within
\t walking distance </a></li>
<li class="third"><a class="ghost-button" href="S1C.php" >Do nothing</a></li>
</ul>
答
您可以使用Flex做到这一点; vertical-align如果应用display:table-cell，则只有财产对我有效。
ul {
\t display: table;
\t padding: 0;
\t width: 90%;
\t margin: 5% auto;
\t list-style-type: none;
\t vertical-align: middle;
\t height: 20vh;
}
li {
\t display: block;
\t float: left;
\t vertical-align: middle;
\t text-align: center;
\t width: 50%;
\t height: 100%;
\t margin-top: 15px;
\t margin-right: 0;
}
li.third {
\t vertical-align: middle;
\t text-align: center;
\t margin: auto;
\t width: 50%;
}
.ghost-button {
\t color: rgb(9, 82, 85);
\t background: rgba(255, 255, 255, 0.01);
\t border: 1px solid rgb(9, 82, 85);
\t padding: 5px 5px;
\t margin: auto;
\t
\t text-decoration: none;
\t width: 100%;
\t height: 100%;
\t display: flex;
justify-content: center;
align-items:center;
}
.third a {
\t display: flex;
justify-content: center;
align-items:center;
\t margin-left: 50%;
\t vertical-align: middle;
}
.ghost-button:hover, .ghost-button:active {
\t color: #FFF;
\t background-color: rgb(9, 82, 85);
\t text-decoration: none;
}
a {
\t text-decoration: none;
\t vertical-align: middle;
\t color: rgb(9, 82, 85);
}<ul>
<li><a class="ghost-button" class="ghost-button" href="S1A.php" class="ghost-button" >Check the newspaper classifieds
\t for affordable pieces </a></li>
<li><a class="ghost-button" class="ghost-button" href="S1B.php" class="ghost-button" >Check for garage sales within
\t walking distance </a></li>
<li class="third"><a class="ghost-button" class="ghost-button" href="S1C.php" class="ghost-button" >Do nothing</a></li>
</ul>
看起来垂直居中我的屏幕上。你使用的是什么浏览器？或者，也许我不明白这个问题。 – floor
您是否点击链接在整个页面中打开代码段？按钮变得更高，文本保持在顶部。 – Lordbug
是的，我看到全屏幕，按钮宽度扩大，但文本仍然看起来居中。我在Firefox中查看。我会复制到一个jsfiddle然后看看。 https://jsfiddle.net/srfp2c52/ – floor