Vertically align text next to an icon
I have 2 blocks of text with a circle next to each one.
I would like to vertically center the alignment of blocks of text using an icon. Right now, if one of the blocks of text is just one line long, it will snap to the top, not the center.
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>
+3
source to share
1 answer
You can use Flexbox
for this. You just need to add align-items: center
to flex container and also remove margin auto from .circle
.
If you want to center the text within the circle, you can also use DEMOFlexbox
for that .
.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>
+4
source to share