要素の高さが不明な場合は垂直に中心を設定します。

Question

要素の高さが不明な場合、垂直方向のテキストを中央に配置しますか？

HTML

<div class="table"> 
    <div class="table-resp"> 

    <div class="second-row"> 
     <div class="col-md-5"> 
      <div class="left-col-text"> 
      Center vertically 
      </div> 
     </div> 
     <div class="col-md-7"> 
     <div class="right-col-text"> 
      <div class="example">Ex1</div> 
      <div class="example">Ex2</div> 
      <div class="example">Ex3</div> 
     </div> 
     </div> 
    </div> 

    </div> 
</div> 

CSS

/* CSS used here will be applied after bootstrap.css */ 
.table{ 
    text-align: center; 
    padding-top: 70px; 
    padding-left: 0px; 
    padding-right: 35px; 
} 

.table-resp{ 
    border: 1px solid green; 
    overflow-x: hidden; 
} 

.text1{ 
    float: left; 
    display: inline-block; 
} 

.second-row{ 
    line-height: 30px; 
    clear: left; 
    min-height: 30px; 
    overflow: auto; 
} 

.left-col-text{ 
    height: 100%; 
} 

要素 "Ex1の、Ex2の" カウントが不明なので、明らかにそれらのよりがある場合は、テーブルの行を取得します高さが大きくなります。また、あなたが一緒にプレイすることができます

.row-ht-eq { 
    display: flex; 
    align-items: center; 
} 

Answer 1

...また、これに応答するだろういくつかのソリューションを、必要とします：

display: table-cell; 
vertical-align: middle; 

Answer 2

position: absolute; 
top: 50%; 
transform: translateY(-50%); 

：私はちょうど<div class="second-row">

CSSを行にrow-ht-eqクラスを追加

https://www.codeply.com/go/bp/4ZEUS7Q7lm 

Answer 3

注：span要素をヘルパーとして使用してください。

HTML：

<div class="col-md-5"> 
      <span class="helper"></span> 
      <div class="left-col-text"> 
      Center vertically 
      </div> 
</div> 

のCss：

.helper { 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
} 

全コード：

.table{ 
 
\t text-align: center; 
 
    padding-top: 70px; 
 
    padding-left: 0px; 
 
    padding-right: 35px; 
 
} 
 

 
.table-resp{ 
 
    border: 1px solid green; 
 
    overflow-x: hidden; 
 
} 
 

 
.text1{ 
 
    float: left; 
 
    display: inline-block; 
 
} 
 

 
.second-row{ 
 
    line-height: 30px; 
 
    clear: left; 
 
    min-height: 30px; 
 
    overflow: auto; 
 
} 
 

 
.left-col-text{ 
 
    height: 100%; 
 
} 
 

 
.helper { 
 
\t display: inline-block; 
 
\t height: 100%; 
 
\t vertical-align: middle; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="table"> 
 
    <div class="table-resp"> 
 

 
    <div class="second-row"> 
 
     <div class="col-md-5"> 
 
      <span class="helper"></span> 
 
      <div class="left-col-text"> 
 
      Center vertically 
 
      </div> 
 
     </div> 
 
     <div class="col-md-7"> 
 
     <div class="right-col-text"> 
 
      <div class="example">Ex1</div> 
 
      <div class="example">Ex2</div> 
 
      <div class="example">Ex3</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

これは自動的に上から下に等しい距離を決定する

.left-col-text { 
    margin:0 auto; 
} 

：

Answer 4

はにあなたのテキストのクラスを変更し

。