So zentrieren Sie ein div horizontal in einer Tabelle mit CSS

Ich habe dies gerade aus Gründen der Übersichtlichkeit aktualisiert.So zentrieren Sie ein div horizontal in einer Tabelle mit CSS

Also habe ich einige Schaltflächen, die ich erstellt habe, die aus einem Kreis und einem font-awesome-Symbol bestehen. Jeder dieser Buttons soll auf Social Media verlinken. Ich möchte nun diese Schaltflächen in eine Tabellenzeile einfügen, wobei jede horizontal und vertikal zur Mitte jeder Tabellenzelle ausgerichtet ist. Wie ordne ich sie horizontal an?

Hier ist mein 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>

Quelle

2016-06-11 Magearlik

Ugh Tabellen für Layouten schlechte Praxis. Ich denke, es ist besser, wenn Sie Bootstrap verwendet, divs in eine Zeile div setzen und dass Sie sich nicht um die Ausrichtung kümmern – jelleB

ich nicht Bootstrap für wie ein css Teil verwenden möchten. es ist eine Art Verschwendung. – Magearlik

try below code..

tun es in jedem Tag Und Code unten in Ihrem CSS hinzufügen

<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 
}

Quelle

2016-06-11 09:40:56 KHUSHBOO

ja das funktioniert. – Magearlik

, obwohl es die Schaltfläche beim Vergrößern der Seite verkleinert – Magearlik

für footer_social_icons id Geben Rand auto.

<!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; 
 
\t 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> 
 
\t 
 
</body> 
 
</html>

Quelle

2016-06-11 09:27:08 Mani

Ich versuche, sie in den Tabellenzellen zu zentrieren. funktioniert, aber es ist nicht css, und nicht html5 – Magearlik

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>

Quelle

2016-06-11 09:44:41 SMS

So zentrieren Sie ein div horizontal in einer Tabelle mit CSS

Antwort

Verwandte Themen