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

Какой самый простой способ выровнять по центру элемент встроенного блока?

В идеале я не хочу устанавливать ширину элементов. Таким образом, в зависимости от текста, введенного в элементы, элемент встроенного блока будет расширяться до новой ширины без необходимости изменять ширину в CSS. Элементы встроенного блока должны располагаться по центру друг над другом (не рядом), а также текст внутри элемента.

См. код ниже или см. на jsFiddle.

Текущий HTML:

<div>
  <h2>Hello, John Doe.</h2>
  <h2>Welcome and have a wonderful day.</h2>
</div>

Текущий ССС:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);  

body {
    margin: 0 auto;
    background: rgba(51,51,51,1);
    font-family: 'Open Sans', sans-serif;
}

div {
    width: 100%;
    height: auto;
    margin: 15% 0;
    text-align: center;
    h2 {
        margin: 0 auto;
        padding: 10px;
        text-align: center;
        float: left;
        clear: left;
        display: inline-block;
        &:first-child {
            color: black;
            background: rgba(255,255,255,1);
        }
        &:last-child {
            color: white;
            background: rgba(117,80,161,1);
        }
    }
}

Добавление br между двумя элементами и удаление float: left/clear: left может быть самым простым способом; однако мне было любопытно, есть ли другой способ сделать это.


html css center centering
person Andrew    schedule 30.10.2014    source источник
comment
возможный дубликат Возможно ли центрировать элемент встроенного блока, и если да, то как?   -  person Rune Vejen Petersen    schedule 23.06.2015

Ответы (1)


arrow_upward
8
arrow_downward

Как это? http://jsfiddle.net/bcL023ko/3/ Удалите float:left слева и добавьте margin: 0 auto, чтобы центрировать элемент. Или это что-то другое, что вы ищете?

person k-nut    schedule 30.10.2014
comment
Вам не нужно использовать margin:0 auto, если у родителя есть text-align:center с элементами inline-block - jsfiddle.net/bcL023ko/4 - person Paulie_D; 30.10.2014
comment
@k-nut Я ищу, чтобы элементы располагались друг над другом, а не рядом. - person Andrew; 30.10.2014
comment
@k-nut Я ищу элементы, которые будут располагаться друг над другом. - person Andrew; 30.10.2014
comment
Какой браузер и разрешение используете? Они сложены для меня. - person k-nut; 30.10.2014
comment
@k-nut Я вижу, что они складываются при меньшем разрешении, но не при всех размерах. Я использую хром, и мое разрешение экрана 1920x1080. - person Andrew; 30.10.2014
comment
@Andrew Эндрю, если вы обернете свои h2 контейнерами шириной 100%, вы сможете решить свои проблемы. Для этого мне пришлось ввести некоторые классы, я уверен, что есть более элегантное решение jsfiddle.net/bcL023ko/ 6 - person k-nut; 30.10.2014
comment
@k-nut Потрясающе! Я попробую. - person Andrew; 31.10.2014