michaelmcgurk michaelmcgurk -4 years ago 88
CSS Question

Vertically centre align text next to icon

I have 2 blocks of text with a circle next to each of them.

I'd like to vertically centre align the blocks of text with the icon. Right now if one of the blocks of text is just one line long, it is forced to the top rather than centre.

Example: https://jsfiddle.net/cq0cj74o/



.circle {
background: #1d1d1b;
border-radius: 50%;
color: #fff;
display: table;
height: 50px;
font-weight: 700;
font-size: 1.6em;
width: 50px;
margin: 0 auto;
margin-bottom: 10px;
float: left;
}

div {
display:block;
height:100px
}

<div>
<p class="circle"><span>1</span></p>
<p>Lorem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum </p>
</div>

<div>
<p class="circle"><span>2</span></p>
<p>Lorem ipsum orem ipsum orem ipsum </p>
</div>




Answer Source

You can use Flexbox for this. You just have to add align-items: center on flex-container and also remove margin auto from .circle.

If you want to center text inside circle you can also use Flexbox for that DEMO.

.circle {
  background: #1d1d1b;
  border-radius: 50%;
  color: #fff;
  display: table;
  height: 50px;
  font-weight: 700;
  font-size: 1.6em;
  width: 50px;
}

div {
  display: flex;
  align-items: center;
}
<div>
  <p class="circle"><span>1</span></p>
  <p>Lorem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum orem ipsum </p>
</div>

<div>
  <p class="circle"><span>2</span></p>
  <p>Lorem ipsum orem ipsum orem ipsum </p>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download