Vertical aligning of pictures with links inside a div

Question

I've been struggling with this simple and basic problem for the last day and can't seem to find a solution for it nowhere.

I'm having a container div on my website, in which there are four social network buttons, and what I'm trying to achieve is vertically align them in to the middle of the container, so there's equal amount of free space on top of them and underneath them.

Please note, that I've linke normalize.css and reset.css to my html.

Muh code:

HTML

<div class="social-line-container">
      <div class="social-line-buttons-group">
          <a href="#0"><img src="socialicons/facebook.png" alt="FB"><a/>
          <a href="#0"><img src="socialicons/twitter.png" alt="TW"><a/>
          <a href="#0"><img src="socialicons/google.png" alt="GO"><a/>
          <a href="#0"><img src="socialicons/youtube.png" alt="YT"><a/>
       </div>
  </div>

CSS

.social-line-container {
width: 66%;
height: inherit;
margin: 0 auto;
}

.social-line-buttons-group a{
display: inline-block;
vertical-align: middle;
height: 100%;
float: right;
padding: 2px;
margin: 0 3px;
}

Any help will be much appreciated.

Check this link:-http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div — Razia sultana, Oct 11 '16 at 04:13

score 0 · Answer 1 · answered Oct 11 '16 at 04:14

All you need to add is clear

.social-line-container {
  width: 66%;
  height: inherit;
  margin: 0 auto;
}
.social-line-buttons-group a {
  display: inline-block;
  /*vertical-align: middle;*/
  height: 100%;
  float: right;
  clear: both; /* add */
  padding: 2px;
  margin: 0 3px;
}

<div class="social-line-container">
  <div class="social-line-buttons-group">
    <a href="#0">
      <img src="socialicons/facebook.png" alt="FB"><a/>
      <a href="#0">
        <img src="socialicons/twitter.png" alt="TW"><a/>
        <a href="#0">
          <img src="socialicons/google.png" alt="GO"><a/>
          <a href="#0">
            <img src="socialicons/youtube.png" alt="YT"><a/>
  </div>
</div>

score 0 · Answer 2 · answered Oct 11 '16 at 04:16

.social-line-container{
border:2px solid black;  
}

.social-line-buttons-group{
    display:flex;
    align-items: center;
    justify-content: center;
  height:100%;
}
.social-line-buttons-group a{
padding: 2px;
margin: 0 3px;
}
img{
width:50px;
  height:50px;
}

<div class="social-line-container">
      <div class="social-line-buttons-group">
          <a href="#0"><img src="http://lh3.googleusercontent.com/-ElsaNCI_yKg/VcXI_VFictI/AAAAAAAAINA/MeFjL1Ymaac/s640/StylzzZ%252520%252528289%252529.png" alt="FB"></a>
          <a href="#0"><img src="https://upload.wikimedia.org/wikipedia/it/archive/0/09/20160903181541!Twitter_bird_logo.png" alt="TW"></a>
          <a href="#0"><img src="http://www.userlogos.org/files/logos/annyella/google3.png" alt="GO"></a>
          <a href="#0"><img src="http://logok.org/wp-content/uploads/2014/08/YouTube-logo-play-icon-219x286.png" alt="YT"></a>
       </div>
  </div>

Vertical aligning of pictures with links inside a div

2 Answers2