Vertically centre align text next to icon

Question

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 1

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>