Question

基本上我的问题是关于容器内的文本。当屏幕尺寸变小时，它会进入下一行。此时，它不再垂直居中，因为出现了一条新线。

如何将其垂直居中？

<div class="low">
  <h4 class="title"> Text to be centered. </h4>
</div>

我通常会为每个换行符调整填充，但这很麻烦且耗时。必须有更好的方法。

Answer 1

您必须使用display: flex;使其垂直居中：

.low {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center; 
}

Answer 2

您可以将text-align属性设置为center。但是，如果容器的宽度不能使其内容无法集中对齐，则会失败。

.low {
    width: 50px;
}

.title {
    text-align: center;
}

<div class="low">
     <h4 class="title"> Text to be centered. </h4>
</div>

https://jsfiddle.net/4oacwqcp/

Answer 3

试试这个

＆＃13;

    <div class="low">
        <h4 class="title"> Text to be centered. </h4>
</div>

＆＃13;

map<string, set<int>> myMap;
while (reading_from_source(something)){
    string key=obtainKeyFromSource();
    myMap[key].insert(obtainIntFromSource());
}

＆＃13;

如果发生换行，如何垂直居中文本

3 个答案: