为了清楚起见，我刚刚更新了这个。
所以我创建了一些按钮，其中包含一个圆圈和一个超棒的字体图标。这些按钮中的每一个都链接到社交媒体。我现在想将这些按钮放在表格行中，其中每个按钮都水平和垂直对齐到每个表格单元格的中心。如何水平对齐它们？
这是我的 html:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://use.fontawesome.com/604215ea7e.js"></script>
<style>
.social_icon
{
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #ccc;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.social_icon:hover
{
background-color: #999;
cursor: pointer;
}
#footer_social_icons
{
width: 20%;
height: 80px;
background-color: #636363;
text-align: center;
}
#footer_social_icons table
{
width: 100%;
height: 80px;
}
#footer_social_icons td
{
vertical-align: middle;
border: 1px solid #fff; /* to show not centred */
}
</style>
</head>
<body>
<div id="footer_social_icons">
<table>
<tr>
<td>
<div class="social_icon">
<i class="fa fa-google-plus" aria-hidden="true"></i>
</div>
</td>
<td>
<div class="social_icon">
<i class="fa fa-facebook" aria-hidden="true"></i>
</div>
</td>
<td>
<div class="social_icon">
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
</td>
<td>
<div class="social_icon">
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
最佳答案
try below code..
在每个标签中做 并在您的 CSS 中添加以下代码
<td>
<div class="socicon">
<div class="social_icon">
<i class="fa fa-google-plus" aria-hidden="true"></i>
</div>
</div>
</td>
.socicon {
margin: 0 auto;
text-align: center;
width: 57%; // you have to adjust width as your requirement
}
关于css - 如何使用 CSS 使表格中的 div 水平居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37762070/