VPF::Выравнивание блоков по центру

Garret

Дата 6.6.2010, 20:13 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 138
Регистрация: 16.9.2006
Где: Киев

Репутация: нет
Всего: 2

Добрый день. Хочу реализовать следующее.

На странице выводится список пользователей. Каждый пользователь это фактически блок с фоткой и информацией. Хочу сделать так что бы эти блоки выводились в ряд в зависимости от размера экрана(если уже не влазит то выводится на новой строке) но и при этом были выровнены по центру.

Вот код:

Код


<div id="users">
    <span class="users_list">
        <img src="images/photo.jpg" alt="" /><br/>
        <a href="#" class="dark_link">Test</a><br/>
        <span class="users_info">
            <span class="users_info_city">Test</span>
            <span class="users_info_rating">Rating: <span class="users_info_rating_positive">1.5</span></span>
        </span>
    </span>
    <span class="users_list">
        <img src="images/photo.jpg" alt="" /><br/>
        <a href="#" class="dark_link">Test</a><br/>
        <span class="users_info">
            <span class="users_info_city">Test</span>
            <span class="users_info_rating">Rating: <span class="users_info_rating_positive">1.5</span></span>
        </span>
    </span>
...
</div>

Код


#users {
    float: left;
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

.users_list {
    width: 234px;
    height: 256px;
    margin-top: 15px;
    margin-left: 20px;
    display: block;
    float: left;
    background:url('images/polaroid_bg.png') no-repeat scroll 0 0 transparent;
}

.users_list img {
    margin-top: 16px;
}

.users_info {
    display: block;
    width: 234px;
    float: left;
    margin-top: 15px;
    color: #646464;
}

.users_info_city {
    display: block;
    width: auto;
    float: left;
    padding-left: 5px;
    font-weight: bold;
}

.users_info_rating {
    display: block;
    width: auto;
    float: right;
    padding-right: 5px;
}

.users_info_rating_positive {
    color: #6CC127;
    font-weight: bold;
}

.users_info_rating_negative {
    color: #D2420C;
    font-weight: bold;
}

Сейчас получается что не выполняется условия что бы блоки были по центру. А сделать спаны инлайном нельзя, потому что тогда внутренняя разметка блока не будет работать.

Возможно это делается элементрано, но я в верстке не силен. Буду рад помощи.

Garret

Дата 7.6.2010, 16:34 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 138
Регистрация: 16.9.2006
Где: Киев

Репутация: нет
Всего: 2

display: inline-block; помог.

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »