How to center the text vertically?

Question

I am using bootstrap cards for my React project and struggling to make the text vertically aligned in the middle. This is what I tried so far, how to correct it?

<div key={element.symbol} className="card text-white bg-success" style={{ width: "25rem", margin: 10, paddingLeft: 2, paddingTop: 2, }}>
            <Link style={{ color: 'white', textAlign: 'center', justifyContent: 'center' }} onClick={() => setsymbol(element.symbol)} to={"/chart/" + element.symbol}>
              <span style={{ float: 'left' }} >{element.symbol}</span>
              <span style={{ float: 'right' }}>{"%" + firstHalf + "." + secondHalf}</span>
            </Link>
          </div>

Answer 1

The best, simplest, most versatile and up-to-date way to get perfect vertical alignment is to use flexbox and the flex properties.

#holder {
  display: flex; 
  flex-direction: row; 
  justify-content: center; 
  align-items: center; 
  height: 200px; 
  background-color: green
}

<div id="holder">
  <p>
    <span>span1</span>
    <span>span2</span>
    <span>span3</span>
  </p>
</div>

A flexbox has a direction (row or column) and the properties align-items and justify-content align items perpendicularly to and in line with this direction. Hence, if the direction is row, align-items is the property handling vertical alignment and justify-content handles horizontal alignment.

Other options:

• vertical-align is for table cells and inline content and only works well in some scenarios.
• combinations of line-height and height on contained objects work in other scenarios.
• combinations with position: absolute on the items to center along with transform: translateY(-50%) and top: 50% may also work in yet other situations.

... but the simplest and most versatile way is to use flexbox!

References:

flex

Answer 2

Add this Class d-flex align-items-center on .card

<div key={element.symbol} className="card text-white bg-success d-flex align-items-center" style={{ width: "25rem", margin: 10, paddingLeft: 2, paddingTop: 2, }}>
            <Link style={{ color: 'white', textAlign: 'center', justifyContent: 'center' }} onClick={() => setsymbol(element.symbol)} to={"/chart/" + element.symbol}>
              <span style={{ float: 'left' }} >{element.symbol}</span>
              <span style={{ float: 'right' }}>{"%" + firstHalf + "." + secondHalf}</span>
            </Link>
          </div>

Answer 3

you can try

 .myauto {
    margin-top: auto;
    margin-bottom: auto;
 }

then

  <div class="myauto">

           // your above code

  </div>

Answer 4

.card{
height : 50px;
width : 150px;
background-color : green;
text-align: center;
display: table;

}


.card p {
vertical-align : middle
display: table-cell;
}

<div class="card">

<p> i am center </p>

</div>