CODEWITHSUNDEEP
htmlcss
Stan
Stan

Reputation: 26511

Align images (different size) and text to center in list?

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

Answers (3)

daveyfaherty
daveyfaherty

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

skmasq
skmasq

Reputation: 4521

Simple answer use span instead of li

http://jsfiddle.net/cRGeD/22/

Upvotes: 1

Chandrakant
Chandrakant

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

Related Questions