当元素高度未知时垂直居中

我想居中居中垂直居中文本，当元素高度未知时？当元素高度未知时垂直居中

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

元素 “练习1，实例2” 数是未知的，所以，如果有更多的，显然，该表行会得到身高更大。我需要一些解决方案，这将是响应这也...

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

来源

2017-05-30 PeterPakla

https://css-tricks.com/centering-in-the-unknown/ – CBroe

只需添加row-ht-eq类排<div class="second-row">

CSS：

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

来源

2017-05-30 08:10:33

注意：如果您只需要支持当前的浏览器，则Flex只是一个选项。请参阅：[我可以使用Flex吗？]（http://caniuse.com/#search=flex） – AlexG

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

你也可以玩：

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

来源

2017-05-30 08:10:45

注意：使用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>

来源

2017-05-30 08:19:18 Ehsan

更改文本类：

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

这将自动决定从顶部到底部距离相等。

来源

2017-05-30 08:25:28

当元素高度未知时垂直居中

回答

相关问题