SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Guru
    Join Date
    Feb 2009
    Posts
    994
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy How can we center an image horizontaly inside an LI ?



    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/

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,611
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    It would be a little easier if the image were also part of the link. Is that feasible?

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    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,

  4. #4
    SitePoint Guru
    Join Date
    Feb 2009
    Posts
    994
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Guru
    Join Date
    Feb 2009
    Posts
    994
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks markbrown4

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

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    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. #7
    SitePoint Guru
    Join Date
    Feb 2009
    Posts
    994
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,611
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by oikram View Post
    Any way to achieve that, without <br /> usage ?
    Code:
    a {display: block;}

  9. #9
    SitePoint Member
    Join Date
    Nov 2011
    Location
    Down underer
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,737
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    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

  11. #11
    SitePoint Member
    Join Date
    Nov 2011
    Location
    Down underer
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    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

  12. #12
    SitePoint Guru
    Join Date
    Feb 2009
    Posts
    994
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

  13. #13
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    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>

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,611
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •