html - HTML 中 <a> 标签上的文本垂直居中

Question

我用我的 HTML 设置了一些按钮，通过使用此 CSS 和 HTML，它们的高度都相同

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;
    	display: inline-block;
    	text-decoration: none;
    	width: 100%;
    	height: 100%;
    	vertical-align: middle;
    } 
    
    .third a {
    	display: block;
    	margin-left: 50%;
    	vertical-align: middle;
    }
    
    .ghost-button:hover, .ghost-button:active {
    	color: #FFF;
    	background-color: rgb(9, 82, 85);
    	text-decoration: none;
    }
    
    a {
    	text-decoration: none;
    	vertical-align: middle;
    	color: rgb(9, 82, 85);
    }

<ul>
<li><a class="ghost-button" class="ghost-button" href="S1A.php" class="ghost-button" >Check the newspaper classifieds
	for affordable pieces </a></li>
<li><a class="ghost-button" class="ghost-button" href="S1B.php" class="ghost-button" >Check for garage sales within
	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 不起作用。

Answer 1

您可以将 .ghost-button 上的 display:inline-block 更改为 display:inline-flex 并更改 vertical-align:middle 到 align-items:center

align-items 是 flex 盒子的垂直居中。 justify-content 将处理水平对齐。

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;
    	display: inline-flex;
    	text-decoration: none;
    	width: 100%;
    	height: 100%;
    	align-items:center;
    } 
    
    .third a {
    	display: block;
    	margin-left: 50%;
    	vertical-align: middle;
    }
    
    .ghost-button:hover, .ghost-button:active {
    	color: #FFF;
    	background-color: rgb(9, 82, 85);
    	text-decoration: none;
    }
    
    a {
    	text-decoration: none;
    	vertical-align: middle;
    	color: rgb(9, 82, 85);
    }

<ul>
<li><a class="ghost-button" href="S1A.php" >Check the newspaper classifieds
	for affordable pieces </a></li>
<li><a class="ghost-button"  href="S1B.php">Check for garage sales within
	walking distance </a></li>
<li class="third"><a class="ghost-button" href="S1C.php" >Do nothing</a></li>
</ul>