CODEWITHSUNDEEP
htmlcss
twigman1200
twigman1200

Reputation: 11

CSS get several lines of text centered on top of each other

https://www.applevelhelper.com/word-trip-answers/

I am trying to get the levels under Quick Jump center aligned over each other instead of spaced evenly on each line. What would be the best way to do that?

.quickwordtrip {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
}
<div class="quickwordtrip">
  <a href="#level1">Levels 1 - 500</a>
  <a href="#level501">Levels 501 - 1000</a>
  <a href="#level1001">Levels 1001 - 1500</a>
  <a href="#level1501">Levels 1501 - 2000</a>
</div>
<div class="quickwordtrip">
  <a href="#level2001">Levels 2001 - 2500</a>
  <a href="#level2501">Levels 2501 - 3000</a>
  <a href="#level3001">Levels 3001 - 3500</a>
  <a href="#level3501">Levels 3501 - 4000</a>
</div>
<div class="quickwordtrip">
  <a href="#level4001">Levels 4001 - 4500</a>
  <a href="#level4501">Levels 4501 - 5000</a>
  <a href="#level5001">Levels 5001 - 5500</a>
  <a href="#level5501">Levels 5501 - 6300</a>
</div>

Upvotes: 1

Views: 40

Answers (1)

mok_ku
mok_ku

Reputation: 236

You can try set a flex-basis to the children:

.quickwordtrip {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
}

.quickwordtrip a {
  flex-basis: 25%;
  text-align: center;
}
<div class="quickwordtrip">
  <a href="#level1">Levels 1 - 500</a>
  <a href="#level501">Levels 501 - 1000</a>
  <a href="#level1001">Levels 1001 - 1500</a>
  <a href="#level1501">Levels 1501 - 2000</a>
</div>
<div class="quickwordtrip">
  <a href="#level2001">Levels 2001 - 2500</a>
  <a href="#level2501">Levels 2501 - 3000</a>
  <a href="#level3001">Levels 3001 - 3500</a>
  <a href="#level3501">Levels 3501 - 4000</a>
</div>
<div class="quickwordtrip">
  <a href="#level4001">Levels 4001 - 4500</a>
  <a href="#level4501">Levels 4501 - 5000</a>
  <a href="#level5001">Levels 5001 - 5500</a>
  <a href="#level5501">Levels 5501 - 6300</a>
</div>

Upvotes: 1

Related Questions