Выровнять конкретный встроенный li по центру ul - PullRequest
Новая
       42

Выровнять конкретный встроенный li по центру ul

1 голос
/ 27 марта 2012

У меня есть эта HTML-структура 

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

и этот код CSS: 

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

Я пытаюсь выровнять .welcome с серединой .top_menu > ul.Я пробовал выше и это:

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

но безуспешно, есть идеи?http://jsfiddle.net/U2mfK/

Ответы [ 2 ]

3 голосов
/ 27 марта 2012

text-align: center; необходимо установить для родителя.Так что переместите его с .welcome на .top_menu ul:)

1 голос
/ 27 марта 2012

Вы определяете .welcome до того, как определяете глобальные стили для li. Это будет означать, что любые стили в .top_menu ul li будут переопределять стили в .welcome (display: block;). Поместите это ниже так: 

.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

Позиционируя внешние теги li абсолютно, вы можете предотвратить их смещение li центра от центра.

Вот так (я включил только дополнительные стили для ясности): 

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

В качестве альтернативы, вы можете оставить .left и .right такими, как они есть, с их поплавками, и просто расположить центральный элемент абсолютно так: 

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

Если вы используете вышеуказанный метод, убедитесь, что margin-left составляет половину ширины. Вы ДОЛЖНЫ указать ширину для этого метода. Если вы просто сделаете его больше, чем контент, он будет центрировать контент из-за text-align: center, поэтому это не должно быть проблемой

...