Menu
I use a list-style-image for li items , and a single-line text.
But it looks bad, so I want to vertically align the text to the middle of the image.
I should use vertical-align: middle , right ? But it didn't work for me.
<html>
<head>
<title> This is an demo </title>
<style>
body {
background-color: #464443;
color: white;
}
ul {
list-style-image: url('bg.png');
}
li {
vertical-align: middle;
}
</style>
</head>
<body>
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
</body>
</html>
908
Inorder to make vertical-align: middle; work, you need to use display: table; for your ul element and display: table-cell; for li elements and than you can use vertical-align: middle; for li elements. You don't need to provide any explicit margins , paddings to make your text vertically middle.
To center both vertically and horizontally, use padding and text-align: center : I am vertically and horizontally centered.
Answer: Use the CSS line-height property Suppose you have a div element with the height of 50px and you have placed some link inside the div that you want to align vertically center. The simplest way to do it is — just apply the line-height property with value equal to the height of div which is 50px .
The CSS just sizes the div, vertically center aligns the span by setting the div's line-height equal to its height, and makes the span an inline-block with vertical-align: middle. Then it sets the line-height back to normal for the span, so its contents will flow naturally inside the block.
A satisfactory way to do this (imo) is to not use list-style-image, instead using the background property to set the "bullet" (note I substituted my own placeholder image since I just copied/pasted from a fiddle). Your padding and other dimensions will vary depending on the size of the "bullet" image.
Here's the fiddle: http://jsfiddle.net/huBpa/1/
body {
background-color: #464443;
color: white;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
background: url('http://lorempixel.com/output/technics-q-c-32-32-1.jpg') no-repeat;
line-height: 32px;
vertical-align: middle;
padding-left: 40px;
}
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
