CODEWITHSUNDEEP
cssflexboxalignmenttext-align
qsi14
qsi14

Reputation: 29

flexbox: set align-items center but text will continue to the bottom instead of the expanding to the top and bottom from center

I am trying to create something like the following image where everything is centered-align but if the text has more than 1 line, have the second line go below the center. In other words, instead of having the center of the text to be center-aligned, I want the first sentence to be what is used for center-aligned. How can I approach that? Thanks in advance. enter image description here

Upvotes: 1

Views: 452

Answers (1)

passatgt
passatgt

Reputation: 4442

Well, its not pretty, but its a working solution: setting the text height to a fixed value, which is 1 line of text and just let it overflow automatically.

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

li {
  margin:10px;
  background:#FFEEAA;
  display:flex;
  text-align:center;
  align-items:center;
  max-width:200px;
  border:1px solid #363327;
}

strong {
  height:1em;
  background:#C6B884;
  padding:0 20px;
}

i {
  font-style:normal;
  font-size:40px;
  border-right:1px solid #363327;
}
<ul>
    <li><i>☆</i><strong>single line</strong></li>
    <li><i>☆</i><strong>this one is multiple lines</strong></li>
    <li><i>☆</i><strong>single line</strong></li>
</ul>

Upvotes: 2

Related Questions