如何确保长文本在圆形形状内水平和垂直居中

Question

如何在水平和垂直的圆形形状内居中放置文本，并在每个文本块之间放置相等的间距？

Answer 1

您可以通过各种方式实现它。 您可以将文本环绕在div中的圆圈中，以便为它提供绝对属性。 这是我的意思：

<ul>
    <li>
    <div class="circle-multi">
      <h3>Lege dein Gebiet in 30 Minuten an</h3>
    </div>

<div class="circle-txt">

Das Einrichten der Haltestellen und der Gebietsgrenzen ist sehr einfach und kann durch den Verkehrsbetrieb in maximal 30 Minuten durchgeführt werden.

</div></li>
    <li>
    <div class="circle-multi">
<h3>Weniger
Leerfahrten</h3>
    </div>
<div class="circle-txt">Nachmittags und auch am Wochenende fahren tausende Busfahrer in leeren Bussen durch die Gemeinden. B.USnow macht die Leerfahrten buchbar und schöpft die Kapazitäten in ihrer Gemeinde besser aus.</div></li>
    <li>
    <div class="circle-multi">
<h3>Nutzung der vorhandenen Infrastruktur</h3>
    </div>
<div class="circle-txt">B.USnow führt zu einer optimierten Ausschöpfung der bestehenden Kapazitäten. Wir bieten die Mobilitätsplattform und arbeiten eng mit den Verkehrsbetrieben vor Ort zusammen.</div></li>
    <li>
    <div class="circle-multi">
<h3>Flexibilität für die Bürger</h3>
    </div>
<div class="circle-txt">Linienfahrten werden durch B.USnow buchbar gemacht und Bürger können "on Demand" direkt von A nach B gebracht werden.</div></li>
</ul>

CSS：

ul {
  display: flex;
  display: block;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  flex: 1;
  max-width: 400px;
  text-align: center;
  display: inline-table;
}

.circle-txt {
  text-align: left;

}
.circle-multi {
  border: 5px solid orange;
  border-radius: 50%;
  height: 200px;
  width: 200px;
  line-height: 30px;
  margin: 50px auto;
    font-style:bold;
    color:#419eb1;
  text-align:center;
    align-items: center;
  vertical-align: middle;
  position: relative;
}

.circle-multi h3 {
  position: absolute;
  /* Push it 50% from top & left */
  top: 50%; left: 50%;
  /* Push it back of it's own width & height by 50% so it will be absolutely in center */
  transform: translate(-50%, -50%);
  margin: 0;
}

这是现场预览

Answer 2

 .father { width: 100%; display: flex; justify-content: space-between; } .wrapper { margin-rigth: 50px; max-width: 300px; display: flex; flex-direction: column; align-items: center; } .circle-wrapper { display: flex; justify-content: center; align-items: center; border: 3px solid red; width: 300px; height: 300px; border-radius: 50%; } .circle-wrapper h3 { max-width: 250px; text-align: center; } .text-after { text-align: center; margin-top: 20px; } 

 <div class="father"> <div class="wrapper"> <div class="circle-wrapper"> <h3>Round 1</h3> </div> <span class="text-after">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span> </div> <div class="wrapper"> <div class="circle-wrapper"> <h3>Round 2</h3> </div> <span class="text-after">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span> </div> <div class="wrapper"> <div class="circle-wrapper"> <h3>Round 3</h3> </div> <span class="text-after">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span> </div> </div>