Menu
I am trying to vertically align some text within a list li and having issues. First off you need to know that I have replaced my list-style-image with a custom image. This is my CSS:
ul.cogs li { list-style-image: url(Images/li_cog.png); height: 50px; line-height: 50px; } I tried to see if there was a way of getting the text to align to the middle. I tried:
vertical-align: middle;
which didn't work, so then I tried:
line-height: 50px;
which also did not work, so I tried:
display: table
which worked, but the image disappears from the list item....
Does anyone know of a way to get this to work?
976
Approaches: There are two methods are available to vertically align the text next to an image as given below: Using flexbox: In this approach, we will use flexbox. For this, we will use CSS display property combined with align-items property. We need to create a parent element that contain both image and text.
Here, we will provide a list of popular CSS methods to middle text vertically within div. The best way to align text vertically in a div is by using CSS flex property. You need to use flexbox along with align-items: center for child. <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae sapien ipsum.
For this, we will use CSS display property combined with align-items property. We need to create a parent element that contain both image and text. After declaring the parent element as flexbox using display: flex; we can align the items to the center using align-items: center;.
The vertical-align property sets the vertical alignment of an element. yes. Read about animatable Try it The numbers in the table specify the first browser version that fully supports the property. The element is aligned with the baseline of the parent.
The issue using list-style-image is that you cannot align with the text, the best thing to do is to use background-image for li element, and then use padding-left for your li elements.
Buggy Demo (The issue which you are facing)
Demo
ul li { background-image: url(http://png-5.findicons.com/files/icons/2222/gloss_basic/32/bullet_black.png); background-repeat: no-repeat; line-height: 30px; padding-left: 30px; } ul { margin: 50px; } you can have
<li><span style="top:-5px; position:relative;">Text shifted 5px upper</span></li> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
