How to vertically align one line or two line text in flex?

Question

When using flexbox, I can align things by such css:

.crp_related .crp_title {
    border-radius: 0px !important;
    font-weight: 600;
    background-color: #4E64DD !important;
    height: 50px;
    display: flex;
    text-align: center;
    overflow: hidden;
    line-height: 1.5;
    flex-flow: unset;
    justify-content: center;
    align-items: unset;
    position: absolute;
    padding: 4px 0px;
}

The problem is one line text will not go to middle: https://i.stack.imgur.com/B8QD7.png

If I use align-items: center;, there is another problem: https://i.stack.imgur.com/wtefi.png (If has more than two lines, it globaly centering, and also this is not what I want)

So how do I push one linner into middle?

Have you tried `vertical-align: middle;`? – Deitsch Oct 19 '20 at 08:46 — Deitsch, Oct 19 '20 at 08:46

score 0 · Answer 1 · answered Oct 19 '20 at 08:56

What you need to do is to put the text into a span - and center that rather than the text.

Here - I am putting display:flex on the card footer - and then margin:auto on the span inside the footer. This will cause the span to center horizontally (due to the max width) and vertically within the card footer.

.card-wrapper {
display: flex;
}

.card {
 width: 200px;
 border: solid 1px #222;
 margin: 16px;
}

.card-body { 
  height: 100px;
}
  
  .card-body p { 
  text-align: center;
}


.card-footer {
  background-color: blue;
  display: flex;
  height: 50px;
  color: white;
  }
  
  
 .card-footer span{ 
  margin: auto;
  max-width: 80%;
  display: inline-block;
  text-align: center;
  }

<div class = "card-wrapper">
 <div class="card">
   <div class="card-body">
     <p> content goes here</p>
   </div>
   <div class="card-footer">
     <span> This is one line of text</span>
   </div>
 </div>
 <div class="card">
   <div class="card-body">
     <p> content goes here</p>
   </div>
   <div class="card-footer">
     <span> This is two lines of text that will wrap</span>
   </div>
 </div>
</div>

crp_title is already an span. – mariobalser Oct 19 '20 at 09:00 — mariobalser, Oct 19 '20 at 09:00

score -1 · Answer 2 · answered Oct 19 '20 at 08:49

-1

Select that title and use align-self: center; Check more on this -> MDN align-self

answered Oct 19 '20 at 08:49

Ernest Manu Ofosu

1
2

I cannot style one item, the titles are not constant. Dynamic changes. – mariobalser Oct 19 '20 at 08:59

How to vertically align one line or two line text in flex?

2 Answers2