Home/ Questions/Q 7707171
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T00:17:34+00:00

I have this html structure <div class=top_menu> <ul> <li class=left><a href= class=family-filter>asdas</a></li> <li class=welcome>Welcome

  • 0

I have this html structure

<div class="top_menu">
    <ul>
        <li class="left"><a href="" class="family-filter">asdas</a></li>
        <li class="welcome">Welcome <span class="username">Guest</span></li>
        <li class="right"><a href="#">Login</a></li>
    </ul>
</div>

and this css code:

.top_menu { 
  padding: 20px; background-color: #fff;
  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
.top_menu ul { margin: 0; padding: 0; line-height: 0; }
.top_menu ul li { display: inline; margin: 0; padding: 0; border: 1px solid red; }
.top_menu ul .welcome { text-align:center; }
.top_menu ul li a { font-size: 14px; }

I am trying to align .welcome to middle of .top_menu > ul. I’ve tried the above and this:

.center {
margin-left: auto;
margin-right: auto;
display: block;
clear: both;
}

but no success, any ideas? http://jsfiddle.net/U2mfK/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are defining .welcome before you are defining the global styles for the li. This will mean any styles in the .top_menu ul li will override the styles in the .welcome (display:block;). Put it below like this:

    .top_menu ul { margin: 0; padding: 0; line-height: 0; }
.top_menu ul li { display: inline; margin: 0; padding: 0; border: 1px solid red; }
.top_menu ul .welcome { text-align:center; display: block; margin: 0 auto; }
.top_menu ul li a { font-size: 14px; }

    UPDATE

    By positioning the outside li tags absolutely, you are able to prevent them from pushing the center li off center.

    Like this (I have only included the additional styles for clarity):

    .top_menu ul { position: relative; }
.top_menu ul .left { position: absolute; left: 0; }
.top_menu ul .welcome { text-align:center; display: block; margin: 0 auto; }
.top_menu ul .right { position: absolute; right: 0; }

    Alternatively, you could leave the .left and .right as they are with their floats, and just position the center element absolutely like this:

    .top_menu ul { position: relative; }
.top_menu ul .left { float: left; }
.top_menu ul .welcome { text-align:center; display: block; position: absolute; left: 50%; margin-left: -100px; width: 200px; }
.top_menu ul .right { float: right; }

    If you use the above method, make sure margin-left is half the width. You MUST specify a width for this method. If you just make it larger than content, it will center the content because of the text-align: center so this should not be a problem

    • 0