Aligning text in list

HTML & CSS
1

I just used the post here to style my lists with the list-style-image.

Now I’m trying to position the image so that the text is aligned at it’s centre. How do I do that?

here is the page:

dog bath, grooming supplies, quality pet supplies | Quality Pet Supplies, Dog Bath, Grooming supplies, dog grooming equipment

2

HI,

I;d use a background image instead because you can’t position a list image properly.

e.g.


.product-tick li {
  background: url("http://www.qps-pets.co.uk/wp-content/themes/eStore/images/tick_s1.gif") no-repeat 0 50%;
  list-style: none;
  padding: 20px 0 20px 60px;
}
3

that did it, thanks.

what’s the 0 50% for?

4

That’s the background position of the image (horizontal vertical). 0 (horizontal) means at the left starting position and 50% (vertical) means the centre of the image is at the 50% position of the element.

5

ok great thanks for that

6

One more question, I just added a list to float to the right of it but how do I mobe the list more to the left? I tryed to put -30% for the horizontal but it dissapears

7

the % is for the background image. if you want to move the whole element ( the entire list) you could use margin-right: ( however many px, ems or % of parent container you want to move the element by)

8

sorry what do you mean move by )

9

Hi,

We might be talking at cross purposes here but it looks like you have a 2em margin set on the ul.


.product-tick ul {
  float: left;
  list-style: none outside none;
  [B]margin-left: 2em;[/B]
  padding: 0;
}

Set it margin :0 if you don’t want a margin (or you can add a small negative margin if you want it further left but not much as there isn’t much room).

10

the ticks on the left move if I change the 2em but I want to move the ticks on the right and if I change the 2em for the list on the right they don’t move.

I’m just trying to get both closer to each other, more in the center

11

Float them both left and then just give the first one the margin to push them towards the middle.

e.g.



.product-tick ul {margin-left:4em}

.product-tick2 ul{
 float:left;
 margin-left:0
}
12

that’s the ticket. Thanks learning a lot from this