Question

如何垂直对齐文字？如果它总是一条线，我可以将线的高度设置为容器的高度。

重要细节以及文字需要加以限制，如附在此帖子上的图片所示。

我需要使用纯CSS来做到这一点。

.block-text-multiple {
    text-overflow: clip;
    overflow: hidden;
}

Answer 1

你可以这样做

    <div class="t">
      <div class="c"> tefas dfas dlorem  Lorem ipsum dolor sit amet, 
consectetur adipisicing elit.t</div>
    </div>

和css

.t{
  display: table;
}
.c{
  display: table-cell;
  vertical-align:middle;
  height: 500px;
  background-color: red;
  padding: 10px;

}

Answer 2

＆＃13;

body {
  background: #131418;
  color: #999;
  text-align: center
}
.container {
  border: 1px solid #999;
  height: 70px
}
.content {
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  max-width: 150px; /* change the limit here */
}

＆＃13;

<body>
  <div class="container">
    <div class="content">
      example with one line
    </div>
  </div>
  <br>
  <div class="container">
    <div class="content">
      example with two lines
      <br>example with two lines
    </div>
  </div>
</body>

＆＃13;

HTML5和CSS3：垂直对齐：DIV中的中间文本要显示的有限字符

2 个答案: