Luiz Luiz - 1 month ago 14
HTML Question

Vertically align two elements in a div

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)?

enter image description here

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 Source

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>