stackoom
  简体   繁体   中英

How to center a div horizontally in a table using CSS

 原文  2016-06-11 09:23:17  6   3    css/ alignment

Question

I just updated this for clarity.

So I have some buttons I have created which consist of a circle and a font-awesome icon. Each of these buttons are to link to social media. I now want to put these buttons inside a table row, where each will be horizontally and vertically aligned to the center of each table cell. How do I horizontally align them?

Here is my 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>

3 answers

solution1
 0  2016-06-11 09:27:08

Give margin auto for 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>

solution2
 0 ACCPTED  2016-06-11 09:40:56

try below code..

do it in every tag And add below code in your 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 
}

solution3
 0  2016-06-11 09:44:41

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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to center absolute div horizontally using CSS? how to center a <div> horizontally in css? CSS How to center a div horizontally How to vertically and horizontally center a div using javascript and css margin? how to center horizontally div and span elements using css How to center vertically and horizontally table using css flexbox? How to center horizontally a div within an li in CSS how i center div elements horizontally in css? css Horizontally center div in a div How to center my a div in a table using CSS?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM