padded divの横にdivを垂直に整列する方法は？

Question

私は2つの子を含む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>

Answer 1

使用flexbox垂直要素整列するには：

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

Codepenデモ：あなただけ適用する必要がありますhttps://codepen.io/anon/pen/oeZVoa

Answer 2

をこれらの組み込みのブートストラップ4アイコン付きのLHS divへのクラス

だから、

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

、今shareContainer divが次のようになります。

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

Answer 3

あなたは周囲の容器にmargin:auto;を追加するだけです：

.share { 
    margin: auto; 
} 

デモ：JSFiddle

Answer 4

あなたはあなたの心のためのフレキシボックスを使用することができます

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