How to vertical align element relative other element with pseudo-class? [duplicate] - css

Question

This question already has answers here:
Vertically center two divs inside a wrapper (with dynamic content and content below the wrapper)
(4 answers)
Closed 7 years ago.
I have multiple boxes (items) with an item number and a description. I want to vertical align my item number regardless of the description height (using only HTML and CSS).
See this image for more info:
<div class="item">
<div class="item-number">1</div>
<div class="item-description">Text placeholder</div>
</div>
As you can see I have multiple boxes and the description text can have different lengths, so I can't absolute position my item number relative to the top.
Any one got any suggestions on how to achieve this?

Answer 1

you should position your number absolutely in order to achieve this. You could also minimalize markup by using a pseudo element, allowing you to do this with a single element.
I have also used a data-attr in order to allow you to dynamically alter the number within the div if you so wish.
Something like:
div {
width: 200px;
border: 5px solid lightgray;
box-shadow: 5px 5px 10px dimgray;
margin: 20px;
padding: 20px;
padding-left: 30px;
position: relative;
}
div:before {
content: attr(data-pointNum);
position: absolute;
top: 50%;
left: -5px;
box-sizing: border-box;
height: 40px;
width: 40px;
transform: translate(-50%, -50%);
text-align: center;
line-height: 30px;
border-radius: 50%;
border: 5px solid tomato;
background: white;
box-shadow: 5px 5px 10px dimgray;
}
<div data-pointNum="1">some text</div>
<div data-pointNum="2">some moretext
<br/>spanning multiple
<br/>lines</div>

Answer 2

Demo: http://jsfiddle.net/UI_Designer/xzmzpL4g/1/
.item{
border:1px solid #000;
padding:20px;
margin-left:20px;
position:relative;
margin-bottom:20px;
}
.item-number{
position: absolute;
left:-10px;
width:20px;
height:20px;
border:1px solid #ccc;
border-radius:50%;
text-align:center;
background:#FFF;
top: 40%;
transform: translate(-20%,0);
}

Answer 3

you can try this
$(document).ready(function() {
$('.item-number').css('top', ($('.item').height() / 2) + 'px');
});
.item-description {} .item {
border: 1px solid #000;
width: 150px;
padding-left: 20px;
}
.item-number {
position: absolute;
left: 5px;
width: 20px;
height: 20px;
border: 1px solid #ccc;
border-radius: 50%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<div class="item-number">1</div>
<div class="item-description">Text placeholder Text placeholder Text placeholder Text placeholder</div>
</div>
and this is demo
https://jsfiddle.net/0xf5hvej/
of course you will need more styling to achieve what you need but this is the basic