CODEWITHSUNDEEP
htmlcss
KML
KML

Reputation: 2322

Centering social icons horizontally

I am a complete newbie on html. I am trying to center horizontally two social media icons- I must have tried about 30 different combinations of code without luck. Any help would be much appreciated - thank you ! I am sure similar questions have been asked but I cant get any solutions to work

a {
  color: #444555;
}

.social-icon-container {
  text-align:center !important;
    
}
    
a.social-icon {
  display: inline-block !important;
  margin:5px 20px;
  padding:5px;
  
}
<div class="social-icon-container">
<a href="URL"><img class="social-icon" src="http://www.placehold.it/32x32" alt="Twitter Logo"> 
             
<a href="URL"><img class="social-icon" src="http://www.placehold.it/32x32" alt="Facebook Logo"> 
</div>

Upvotes: 0

Views: 1729

Answers (4)

Blind
Blind

Reputation: 93

Use this, code short but good (and responsive too!)

main {
  text-align: center;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<main>
  <aside>
    <a href="#">
      <img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-128.png" alt="Twitter Icon"></a>
    <a href="#"><img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-facebook-128.png" alt="Facebook Icon"></a>
  </aside>
</main>
</body>
</html>

Upvotes: 0

Steveo
Steveo

Reputation: 557

The code you have seems to center them fine. See JSFiddle example.

However your html code is not complete, you have not closed your img and a tags.

<div class="social-icon-container">
    <a href="URL"><img class="social-icon" src="URL" alt="Twitter Logo" /></a>

    <a href="URL"><img class="social-icon" src="URL" alt="Facebook Logo" /></a> 
</div>

Upvotes: 1

herrh
herrh

Reputation: 1368

Try this:

* {
  margin: 0;
  padding: 0;
}
.social-wrapper {
  background: green;
  width: 100%;
  text-align: center;
  font-size: 0;
}
.social {
  display: inline-block;
  margin: 0 auto;
  background: red;
  font-size: 0;
}
.social a {
  display: inline-block;
  margin: 0 5px;
  font-size: auto;
}
<div class="social-wrapper">
    <div class="social">
        <a href="#"><img src="http://www.placehold.it/32x32" alt="fb"></a>
        <a href="#"><img src="http://www.placehold.it/32x32" alt="tw"></a>
    </div>
</div>

Upvotes: 2

Moneer Kamal
Moneer Kamal

Reputation: 1877

try this: for the link element

a{
display:inline-block;
 -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    position: relative;
    top: 50%;
}

Upvotes: 0

Related Questions