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

Question

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

Answer 1

In various way you can achieve it. You can wrap the text in circle within a div so you can give it a absolute property. Here is what I mean:

<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;
}

Here is the live preview

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>