Vertically align two elements in a div

Question

Explanation

I'm trying to vertically align these two "containers" below (black and blue), where, for example, the distance A should be the same as B. I've already tried to use

top

or

below

, but it isn't responsive. Is there any other way to do it and still have the facebook icon centered (which, for some reason, didn't center on Safari, but works just fine with Chrome)?

Code

You can also see it in JSFiddle (full screen).

.content {

    background: yellow;

    padding-top: 40px;

    padding-bottom: 40px;

}



.black-container {

    background: black;

    display: flex;

}



.social-button {

    display: flex;

    justify-content: center;

    width: 40px;

    height: 40px;

    font-size: 16px;

    background: white;

    border: none;

    border-radius: 50%;

}



.blue-container {

    background: blue;

}

<html>



<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>



<body>

    <div class="container content">

        <div class="row">



            <div class="black-container col-xs-6">

                <button type="button" name="button" class="social-button"><i class="icon-social-facebook"></i></button>

                <button type="button" name="button" class="social-button"><i class="icon-social-facebook"></i></button>

            </div>



            <div class="blue-container col-xs-6 text-right">

                <p>testing <a href="">TEST</a> testing</p>

            </div>



        </div>

    </div>

</body>



</html>

Thanks in advance,

Luiz.

Answer 1

Just use flexbox for your row, and don't forget to add prefix for cross browser

.content {
  background: yellow;
  padding-top: 40px;
  padding-bottom: 40px;
}

.row {
  /* Safari 6.1+ */
  display: -webkit-box;
  /* IE 10 */
  display: -ms-flexbox;
  /* standard*/
  display: flex;
  /* Safari 6.1+ */
  -webkit-box-align: center;
  /* IE 10 */
  -ms-flex-align: center;
  /* standard*/
  align-items: center;
}

.black-container {
  background: black;
  display: flex;
}

.social-button {
  display: flex;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 16px;
  background: white;
  border: none;
  border-radius: 50%;
}

.blue-container {
  background: blue;
}

<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
  <div class="container content">
    <div class="row">

      <div class="black-container col-xs-6">
        <button type="button" name="button" class="social-button"><i class="icon-social-facebook"></i></button>
        <button type="button" name="button" class="social-button"><i class="icon-social-facebook"></i></button>
      </div>

      <div class="blue-container col-xs-6 text-right">
        <p>testing <a href="">TEST</a> testing</p>
      </div>

    </div>
  </div>
</body>

</html>

Vertically align two elements in a div

Explanation

Code

Sign up