How can we center an image horizontaly inside an LI ?

**oikram** · Dec 10, 2011 17:16

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:

Code:

   <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 ?

http://jsfiddle.net/4E7Lu/

**ralph.m** · Dec 10, 2011 17:34

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

**markbrown4** · Dec 10, 2011 17:36

Hi,

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

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;
}
</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,

**oikram** · Dec 10, 2011 17:39

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!!!

**oikram** · Dec 10, 2011 17:41

Thanks markbrown4

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

**markbrown4** · Dec 10, 2011 17:48

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.

**oikram** · Dec 10, 2011 18:55

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.

**ralph.m** · Dec 10, 2011 21:06

Originally Posted by oikram

Any way to achieve that, without <br /> usage ?

Code:

a {display: block;}

**KeepItHamsta** · Dec 10, 2011 22:36

How about this:

HTML Code:

<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.

**dresden_phoenix** · Dec 10, 2011 23:03

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:

Code:

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.

Code:

 <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

Code:

.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

Code:

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

**KeepItHamsta** · Dec 11, 2011 04:03

Originally Posted by dresden_phoenix

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

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

**oikram** · Dec 11, 2011 07:57

Originally Posted by ralph.m

Code:

a {display: block;}

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.

**markbrown4** · Dec 11, 2011 18:02

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

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>

**ralph.m** · Dec 11, 2011 18:11

Originally Posted by markbrown4

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

Yep, that's what I intended. Sorry if it wasn't clear.

User Tag List

Thread: How can we center an image horizontaly inside an LI ?

Thread Tools

Display

How can we center an image horizontaly inside an LI ?

Bookmarks

Bookmarks

Posting Permissions