Question

我的自动换行在具有特定类的div中不起作用。

检查我的小提琴：https://jsfiddle.net/d7zjt408/1/

在普通的div中，自动换行应该正常工作：

<div class="back" style="width: 100px; height: 100px; background-color: red;">
  <h4>Konsequentialismus</h4>
</div>

但是，只要我添加这个类，自动换行就会停止工作：

.centered {
  display: flex;
  align-items: center;
  justify-content: center }

正如你可以在小提琴中看到的那样，在第二个div中，“Konsequentialismus”这个词并没有像第一个div那样被打破。任何人都可以帮助我吗？

Answer 1

你也可以在没有flex的情况下使用它

.centered h4{
  text-align:center;
 position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); }

h4 {
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
  text-align: left;
}

.centered h4{
  text-align:center;
 position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); }

<div class="back" style="width: 100px; height: 100px; background-color: red;">
  <h4>Konsequentialismus</h4>
</div>
<br>

<div class="back centered" style="width: 100px; height: 100px; background-color: red;">
  <h4>Konsequentialismus</h4>
</div>

在居中的div内的自动换行不起作用

1 个答案: