Reputation: 26511
Is it possible to align everything to center in this example by using CSS? If not then what should I do?
As you can see the images are not the same height so it makes things even more complicated. What I want is align all images and text so they look like a line.
Here is fiddle: http://jsfiddle.net/cRGeD/
Upvotes: 0
Views: 810
Reputation: 4613
Edit: here I've applied the principle below to the first two items in your jsFiddle: http://jsfiddle.net/cRGeD/23/.
HTML
<span class="icon question-icon">1234</span>
CSS
.icon{
padding-left: 20px;
background-position: left center;
background-repeat: no-repeat;
display: inline-block;
}
.question-icon{
background-image: url("../path/for/images.jpg");
}
This way you can use a different class for a different icon, and only need to add the image path to the new class.
Upvotes: 0
Reputation: 1981
This could help you, I have added DIV for text and floated it to left, then adjusted line-height 250% of li, check fiddle http://jsfiddle.net/chanduzalte/cRGeD/8/
Upvotes: 0