如何使用 CSS 在表格中水平居中 div答案

【问题标题】：How to center a div horizontally in a table using CSS如何使用 CSS 在表格中水平居中 div
【发布时间】：2016-06-12 11:30:56
【问题描述】：

为了清楚起见，我刚刚更新了这个。

所以我创建了一些按钮，其中包括一个圆圈和一个很棒的字体图标。这些按钮中的每一个都将链接到社交媒体。我现在想把这些按钮放在一个表格行中，每个按钮都将水平和垂直对齐到每个表格单元格的中心。如何水平对齐它们？

这是我的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>

【问题讨论】：

呃，使用表格进行布局是不好的做法。我认为最好使用引导程序，将 div 放在一个行 div 中并且您不必担心对齐
我不想将引导程序用于一个 css 部分。有点浪费。
这能回答你的问题吗？ How to position a table at the center of div horizontally & vertically

标签： css alignment

【解决方案1】：

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 
}

【讨论】：

虽然当你调整页面大小时它会挤压按钮

【解决方案2】：

为 footer_social_icons id 自动设置边距。

<!DOCTYPE html>
<html lang="en">
<head>
  <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;
	margin:0 auto;
    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;
}
  </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>

【讨论】：

我试图将它们集中在表格单元格中。有效，但不是 css，也不是 html5

【解决方案3】：

Do you need like this


<!DOCTYPE html>
<html lang="en">
<head>
  <style>
 .social_icon
{  
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ccc;
    text-align: center;
    display: table-cell;
    vertical-align:center;
}
.social_icon:hover
{   
    background-color: #999;
    cursor: pointer;
}
#footer_social_icons
{    
    width:20%;
    height:80px;
    margin:auto ;
    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;
}
  </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>

【讨论】：