How can we center an image horizontaly inside an LI?

HTML & CSS
1

:frowning:

It’s amazing how can’t I just pull out such a simple task.

We wish to have a menu (ul list) displayed inline, where, on top we have an image and, at the bottom, we have an anchor.

Something like the above:


   <iimg>    <iimg>    <iimg>
  <anchor>  <anchor>  <anchor>

The solution must be valid for IE 7 too.

I’ve tried text-align centered the image. No luck;
I’ve tried display:block; on the li, on -img on both…
I’ve also defined widths here and there (but the images could have variable widths (not sure));
I’ve tried margin: 0 auto; but it centers on the page, but not on the LI. :///

Can I have a help here plz ?

2

It would be a little easier if the image were also part of the link. Is that feasible?

3

Hi,

You need to apply text-align: center; to the block containing the inline elements, not the other way around.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
<style>
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
li {
	float: left;
	text-align: center;
	white-space: nowrap;
	padding: 0 10px;
}
</style>
</head>
<body>
<ul>
    <li>
        <img src="http://cdn.designrfix.com/wp-content/themes/designrfix/img/searchbtn.jpg"><br>
        <a href="#">link 1</a>
    </li>
    <li>
        <img src="http://cdn.designrfix.com/wp-content/themes/designrfix/img/searchbtn.jpg"><br>
        <a href="#">link 2</a>
    <li>
</ul>
</body>
</html>

All the best,

4

ralph.m, thanks a lot for your reply.
If by doing that, we can have the image inside the anchor and still have to text of the anchor to be underline when the user mouse over, then yes it would be feasible.

I’ve pissed off because this seems to be an easy task and I can’t pulled out! Arrgh!!!

5

Thanks markbrown4

padding: 10px will not be dropped when the user zooms in or the image as a width a little different ?

6

Not sure what you mean by “padding: 10px will not be dropped when the user zooms in”
Because there’s no fixed widths it will work fine with different sized images.

7

So your code should allow those elements to be centered regardless the defining padding. Ok. Clear.

One last thing, and the reason why I was struggling here so hard:
Any way to achieve that, without <br /> usage ?

Thanks,
m.

8 
a {display: block;}
9

How about this:

<ul>
    <li>
        <a href="#" class="searchbtn">link 1</a>
    </li>
    <li>
        <a href="#" class="searchbtn">link 2</a>
    <li>
</ul>

now you just format your a as display:block, set it to the correct width&height and use your image as background on a.searchbtn. this way your visitors can click on the image and text, and you can sprite your background images together, saving you a few requests.

10

I want to expound on KeepItHamsta’s solution…

#1) Do it ONLY if your image is NOT content! It really would be a mess if you had to use different images or update the page… ugh.
If it is content the best solution is:

ul.searchbtn a{ display:block}
ul.searchbtn li{ text-align:center;}

That’s it ; you just had the text align on the wrong element, style the rest to suit your aesthetic sensibilities.

OK back to KeepItHamsta’s:

It would be more efficient, as seen above, to give the UL the class instead of each individual link.

 <ul class="searchbtn">
    <li >
        <a href="#" >link 1</a>
    </li>
    <li >
        <a href="#" >link 2</a>
    </li>
    <li >
        <a href="#" >link 3</a>
    </li>
</ul>

and then this CSS


.searbutton a {display:block; text-align:center; padding-top: (height of image + let's say 10px); background:url(yourimage.jpg) no-repeat center 5px;}

This (or hapmsta )wont save any http request. It is a BAD idea to declare height AND with on text links, and for a spite technique to work you have to fave fixed dimensions. If you are dead set in using sprites… you could use the :before pseudo element but remember you will have to have some fixes for ltIE7



ul.searchbtn a{ display:block; }
ul.searchbtn li{ text-align:center;}
ul.searchbtn li:before{ display:block;content:""; background:url(yourimage.jpg) no-repeat center top; height:(height of your image); }

Then create a VERTICAL sprite

hope this gives you some options to work with

11

i was assuming he wanted different images for different links; hence the class on a and not on ul :slight_smile:

12

Thanks. That will not work with markbrown4 suggested code.

@All - I will use <br /> for the markup of all buttons.

I rest my case.

Thanks a lot for your inputs.

Cheers.

13

Yep, that’s what I intended. Sorry if it wasn’t clear. :slight_smile:

14

Ralph’s suggested of a { display: block } will actually work with my code:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
<style>
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
li {
	float: left;
	text-align: center;
	white-space: nowrap;
	padding: 0 10px;
}
a { display: block }
</style>
</head>
<body>
<ul>
    <li>
        <img src="http://cdn.designrfix.com/wp-content/themes/designrfix/img/searchbtn.jpg">
        <a href="#">link 1</a>
    </li>
    <li>
        <img src="http://cdn.designrfix.com/wp-content/themes/designrfix/img/searchbtn.jpg">
        <a href="#">link 2</a>
    <li>
</ul>
</body>
</html>