Центрирование внутри элемента <div>

0

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

Однако в моей последней ситуации обычные ответы не работают на меня.

Это класс, который должен иметь в себе другие элементы, расположенные внутри него (т.е. Списки, таблицы):

.container {
    position: relative;
    width: 80%;
    height: 90%;
    background-color: #282828;
    box-shadow: inset -6px -6px 6px -2px #1d1d1d;
    color: #FFF;
    border-radius: 0 10px 0 0;
    float: left;
}

Я добавил position: relative потому что я положил еще один дочерний <div> внутри .container которого была установлена absolute позиция. Мне действительно удалось сосредоточиться на вещах, но это не тот центр, в котором я нуждаюсь. Когда я добавил таблицу-подобную структуру div внутри .container она вернулась влево - не знаю, почему.

Я был бы признателен за помощь.

JSFiddle: http://jsfiddle.net/J3jm7/3/

  • 1
    Нам нужно увидеть полный HTML / CSS. JSfiddle, пожалуйста?
  • 0
    Вы пробовали text-align: center на родителя?
Показать ещё 2 комментария
Теги:
center

2 ответа

1
Лучший ответ

Центрирование встроенного элемента

Чтобы text-align:center встроенный элемент, просто используйте text-align:center на контейнере.

.container {
    text-align:center
}

демонстрация

Центрирование элемента уровня блока

Используйте margin:auto чтобы центрировать элемент уровня блока, например таблицу в своем контейнере.

.container table {
    margin:auto;
}

демонстрация

Центрирование списка

Списки - это особый случай из-за li { display: list-item; } li { display: list-item; }. Чтобы центрировать <ul> вам нужно будет изменить его на элемент inline-block и центрировать его на контейнере.

.container {
    text-align:center
}

.container ul {
    padding:0;
    display:inline-block;
}

демонстрация

Поделиться
0

Вы должны установить левое и правое поля элемента внутри вашего контейнера. Вот пример, слегка модифицирующий ваш код, чтобы вы могли видеть, что центрирование происходит на элементе таблицы:

<head>
    <style>
        .container {
            position: relative;
            width: 100%;
            height: 800px;
            background-color: #282828;
            box-shadow: inset -6px -6px 6px -2px #1d1d1d;
            color: #FFF;
            border-radius: 0 10px 0 0;
            float: left;
            border:1px solid black;
        }
            .container table {
                width:25%;
                height: 25%;
                margin-left:auto;
                margin-right:auto;
                border:5px solid blue;
            }
    </style>
</head>
    <body>
        <div class="container">
            <table></table>
        </div>
    </body>
</html>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню