垂直对齐div中的两个元素

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

我试图垂直对齐下面的这两个“容器”(黑色和蓝色),例如,距离A应该与B相同。我已经尝试使用顶部或下面,但它不是响应。有没有其他方法可以做到这一点,仍然有Facebook图标居中(由于某种原因,这不是以Safari为中心,但在Chrome上工作得很好)?

Code

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

你也可以在JSFiddle中看到它(全屏)。

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

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

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

Code

更多相关文章

随机推荐