Question

我的网站中有一个div，我希望文本垂直对齐，这里有一些CSS

overflow-y:auto;
font-size: 150%;
justify-content: center;
flex-direction: column;
display:flex;
height:350px !important;
overflow-y:auto;

当文本很短时，这很有效，但是当它很长时会被切断

Answer 1

您是否尝试过使用 display：table-cell ？

另外，你不需要！important;

HTML：

<div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna felis, porttitor eu porttitor at, mattis a ante. Suspendisse vitae porttitor tellus. Vivamus eget laoreet ligula, vitae dignissim ex. Phasellus accumsan porttitor lectus, non accumsan 
</div>

CSS：

.content {
    display: table-cell;
    vertical-align:middle;
    width:200px;
    height:350px;
    background: #ff0000;
}

JS小提琴： http://jsfiddle.net/9ppf5xdg/

Answer 2

尝试使用：text-align: center;

单独应该可以正常工作

我将2个不同的div设置为宽度为百分比，文本较短，另一个设置为px宽度，文本较长。

＆＃13;

div{
  background-color: royalblue;
  width: 50%;
  text-align: center;
  margin:2px;
}

.d{
  background-color: royalblue;
  width: 250px;
  text-align: center;
  margin:2px;
}

＆＃13;

<div>Sup World</div>
<div class='d'>Sup World Sup World</div>

＆＃13;

如何在没有文本溢出的情况下保持CSS垂直对齐？

2 个答案: