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”计数未知，因此，如果有更多这些，显然，表格行的高度会更大。我需要一些解决方案，这也会对此做出反应......

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

Answer 1

只需将row-ht-eq课程添加到行<div class="second-row">

即可

CSS：

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

Answer 2

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

你也可以玩：

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

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{
	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 {
	display: inline-block;
	height: 100%;
	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>

Answer 4

将文字课程更改为：

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

这将自动决定从上到下的相等距离。

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

4 个答案: