Невозможно центрировать элемент CSS .. MAD! - PullRequest
Новая
       1

Невозможно центрировать элемент CSS .. MAD!

1 голос
/ 04 апреля 2011

Я вырываю волосы.Я не могу центрировать элемент.

Моя скрипка: http://jsfiddle.net/BC37U/

Я хочу, чтобы Моя учетная запись была центрирована, как Приветственный пользователь, и это не будет иметь никакого значения для моей работы.ПОЧЕМУ!

Спасибо!:)

Ответы [ 2 ]

1 голос
/ 04 апреля 2011

Я попробовал другой подход, так как Моя учетная запись находится в одной строке, установив высоту строки в соответствии с высотой контейнера, выровняйте элемент по вертикали.Итак, вот мое предложение:

CSS : 

.clearfix {
    display:block;
}

.clearfix:after {
visibility: hidden;
    display: block;
    font-size: 0;
    content: ".";
    clear: both;
    height: 0;
}

.loggedin_container { 
margin-left: -10px;
    width:920px;
    background-color: #333333;
    color: white;
    -moz-border-radius-topright: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
}

#nav_login_welcomeuser{
    font-size: 12px;
    font-weight: bold;
padding: 7px 10px 0px 15px;
    float: left;
    display: inline;
}

#nav_login_navigation {
    display: block;
    float: left;
    text-decoration: none;
    list-style: none;
}

#nav_login_navigation li{
    float: left;
    font-size: 12px;
    font-weight: bold;
    opacity:0.8;
    filter:alpha(opacity=80);
    border-left: 1px solid white;
}

#nav_login_navigation img{
    margin-left: 10px;
    float: left;
}

#nav_login_navigation li span{
    margin-left: 5px;
    line-height: 30px;
    display:block;
    float:left;
}

#nav_login_navigation li:hover{
    opacity:100;
    filter:alpha(opacity=100);
}

HTML : 

<div class="loggedin_container noselect clearfix">
<span id="nav_login_welcomeuser">
    Welcome User!
</span>
<ul id="nav_login_navigation">
    <li>
    <img class="nav_login_floatleft" src="../images/nav/house16.png"/>
    <span>My Account</span>
    </li>
</ul>

Для разметки я добавил класс clearfix, для очистки плавающих элементов.

Я также использую сброс из meyerweb, на случай, если у вас его нет.

Надеюсь, он работает для вас.

1 голос
/ 04 апреля 2011

Добавить vertical-align: center к #nav_login_navigation img примерно так: 

#nav_login_navigation img{
    margin-top: 4px; 
    margin-left: 10px;
    vertical-align: middle;
}
...