如何垂直對齊填充div旁邊的div？

我有一個包含兩個孩子的div，每個孩子都使用bootstrap的列進行構建。但是，在這些div中，我需要做的是對於左側div，我有一些圖標需要垂直對齊，並且相對於右側的div居中。如何垂直對齊填充div旁邊的div？

右邊的div包含一個充當按鈕的錨定標記，並有一些填充。這會導致按鈕向下延伸，而左側的div不會佔用剩餘的高度。

我在這裏附上了一個 codepen 來顯示我在說什麼。

.shareContainer { 
 
    padding: 28px 0px; 
 
} 
 

 
.row { 
 
    background: #eee !important; 
 
} 
 

 
.fa-icon { 
 
    margin-left: 20px; 
 
    font-size: 2.2em; 
 
    color: #ff7350; 
 
} 
 

 
.button { 
 
    display: inline-block; 
 
    padding: 18px 50px; 
 
    padding-right: 30px; 
 
    font-size: 17px; 
 
    font-weight: 400; 
 
    font-family: "Lato"; 
 
    border-radius: 2px; 
 
    letter-spacing: 0.01em; 
 
    color: #fff !important; 
 
    text-transform: uppercase; 
 
    background-color: #fb8669; 
 
    box-shadow: none; 
 
    border: none; 
 
} 
 

 
.arrowRight { 
 
    float: right; 
 
    margin-left: 20px; 
 
} 
 

 
.button:active, 
 
.button:focus, 
 
.button:hover { 
 
    text-transform: uppercase; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
}

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

 
<div class='container shareContainer'> 
 
    <div class='row'> 
 
    <div class="col-sm-8"> 
 
     <i class='fa fa-share-square-o fa-icon'></i> 
 
     <i class='fa fa-facebook-square fa-icon'></i> 
 
     <i class='fa fa-twitter fa-icon'></i> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
     <a target="_blank" class='button' }> 
 
       register for event <svg class='arrowRight'width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="arrow-right"><path d="M9 4l7 8-7 8" stroke="currentColor" stroke-width="2" fill="none" fill-rule="evenodd"></path></svg> 
 
      </a> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-08-08 Kim Lee

使用flexbox到垂直對齊的元素：

.shareIcons { 
    display: flex; 
    align-items: center; 
}

Codepen演示：https://codepen.io/anon/pen/oeZVoa

來源

2017-08-08 17:30:46

這有助於最。即時通訊不在引導程序4上（意外地將其放在代碼中），即時通訊3，這是如何使其工作的最簡單的解釋。我需要學習flexbox。 –

你只需要應用這些內置自舉4 LHS div的圖標

d-flex 
justify-content-center 
align-items-center

所以，現在shareContainer格看起來就像這樣：

<div class="container shareContainer"> 
    <div class="row"> 
      <div class="col-sm-8 d-flex align-items-center justify-content-center"> <===== 
      ... 
      </div> 
      <div class="col-sm-4"> 
      ... 
      </div> 
    </div> 
</div>

這裏有一個Codepen

它所做的基本上就是應用這些CSS屬性：

display: flex; 
justify-content: center; 
align-items: center;

來源

2017-08-08 17:32:12 Aj334

你只需在周圍的容器中添加margin:auto;即可：

.share { 
    margin: auto; 
}

演示：JSFiddle

來源

2017-08-08 17:33:33 trevorp

您可以使用Flexbox，就爲你的定心

.shareContainer { 
 
    padding: 28px 0px; 
 
} 
 

 
.row { 
 
    background: #eee !important; 
 
} 
 

 
.fa-icon { 
 
    margin-left: 20px; 
 
    font-size: 2.2em; 
 
    color: #ff7350; 
 
} 
 

 
.flex { 
 
    display: flex; /* new */ 
 
    align-items: center; /* new */ 
 
} 
 

 
.button { 
 
    display: inline-block; 
 
    padding: 18px 50px; 
 
    padding-right: 30px; 
 
    font-size: 17px; 
 
    font-weight: 400; 
 
    font-family: "Lato"; 
 
    border-radius: 2px; 
 
    letter-spacing: 0.01em; 
 
    color: #fff !important; 
 
    text-transform: uppercase; 
 
    background-color: #fb8669; 
 
    box-shadow: none; 
 
    border: none; 
 
} 
 

 
.arrowRight { 
 
    float: right; 
 
    margin-left: 20px; 
 
} 
 

 
.button:active, 
 
.button:focus, 
 
.button:hover { 
 
    text-transform: uppercase; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
} 
 

 
.right-button { 
 
    margin-left: auto; /* new */ 
 
}

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

 
<div class='container shareContainer'> 
 
    <div class="flex"> 
 
     <i class='fa fa-share-square-o fa-icon'></i> 
 
     <i class='fa fa-facebook-square fa-icon'></i> 
 
     <i class='fa fa-twitter fa-icon'></i> 
 
     <a target="_blank" class='button right-button' }> 
 
       register for event <svg class='arrowRight'width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="arrow-right"><path d="M9 4l7 8-7 8" stroke="currentColor" stroke-width="2" fill="none" fill-rule="evenodd"></path></svg> 
 
      </a> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-08-08 17:35:24

如何垂直對齊填充div旁邊的div？

回答

相關問題