垂直对齐div中的两个元素

时间：2017-08-17 06:10:20

标签： html css twitter-bootstrap

我试图垂直对齐这两个＆＃34;容器＆＃34;下面（黑色和蓝色），例如，距离A应该与B相同。我已经尝试使用top或below，但它不是响应。有没有其他方法可以做到这一点，并仍然以Facebook图标为中心（由于某种原因，它不是以Safari为中心，但在Chrome上工作正常）？

enter image description here

代码

您也可以在JSFiddle（full screen）中看到它。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：4)

只需为您的行使用flexbox，并且不要忘记为跨浏览器添加前缀

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

答案 1 :(得分：2)

尝试使用Flexbox并从display:flex和black-container移除social-button 

.content {
  background: yellow;
  padding-top: 40px;
  padding-bottom: 40px;
}
.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

.black-container {
  background: black;
}

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

.blue-container {
  background: blue;
  color: #fff;
}
.blue-container p {
  padding: 10px 0;
  margin:0;
}
<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 row-eq-height">
        <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>

答案 2 :(得分：2)

可能是为行定义一个flexbox。我为此创建了一个单独的类，并将其添加到具有类.row

的div中

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

.row.black-n-blue {
  display: flex;
  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;
}
＆＃13; 
<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 black-n-blue">

    <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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题