EN
CSS - how to center sibling elements vertically in div?
1 answers
1 points
I have image and link with text inside a div element.
How can I center all elements inside this div vertically?
Below code will output the the result like this:
As we can see the 'Created by:' span and 'Username' a href element are at the bottom of the line, but I'd like to have them in the middle of the picture, how to make it work?
My code:
xxxxxxxxxx1
2
<html>3
<body>4
<div class="my-div">5
<span >Created by:</span>6
<img width: 50px alt="User pic"7
src="https://dirask.com/static/bucket/1596732157426-jm9AdKBDp3--image.png">8
<a href="">Username</a>9
</div>10
</body>11
</html>I uploaded mini pic used in this example:
1 answer
1 points
Quick solution:
xxxxxxxxxx1
<div class="my-div" style="display: flex; align-items: center;">We just need to add display: flex; align-items: center; to outer div.
Full working code example:
xxxxxxxxxx1
2
<html>3
<body>4
<div class="my-div" style="display: flex; align-items: center;">5
<span >Created by:</span>6
<img width: 50px alt="User pic"7
src="https://dirask.com/static/bucket/1596732157426-jm9AdKBDp3--image.png">8
<a href="">Username</a>9
</div>10
</body>11
</html>It will produce the result like this:
All elements should be in the middle of the picture :D
0 commentsShow commentsAdd comment
