Горизонтальный центр текста на дисплее ‹p›: table-cell?

Я пытаюсь центрировать текст по горизонтали, но это не работает. Кажется, это из-за display: table-cell Знаете ли вы обходной путь? (обратите внимание, что я использую бутстрап)

Спасибо! > Codepen: http://codepen.io/goodux/pen/wgBCf

html:

<div class="feature">
    <span class="glyphicon glyphicon-star feature-icon"></span>
    <p class="feature-text text-center">
        Gather user's feedback and engineer's requirements.
    </p>
</div>

CSS:

.feature {
    margin-bottom: 3.5em;
    background-color: #f3f3f3;
    border-radius: 5px;

}
span.feature-icon {
    background-color: #FA6900;
    border-radius: 3px;
    color: #FFF;
    font-size: 3em;
    padding: .5em;
    position: absolute;
    top: 0;
}

p.feature-text {
    overflow: hidden;
    padding: 0 .5em 0 6.5em;
    vertical-align: middle;
    height: 6em;
    display: table-cell;
}

.text-center {
    text-align: center;
}

html css twitter-bootstrap centering
person Pierre    schedule 12.07.2014    source источник
comment
зачем делать это display:table-cell ?   -  person Gabriele Petrioli    schedule 12.07.2014
comment
Я хочу, чтобы текст функции был выровнен по вертикали. Это решение, которое я нашел в Stackoverflow   -  person Pierre    schedule 12.07.2014

Ответы (2)


arrow_upward
1
arrow_downward

Чтобы display:table-cell работал правильно, он должен находиться внутри элемента display:table.

Итак, если вы измените правило .feature на

.feature {
    margin-bottom: 3.5em;
    background-color: #f3f3f3;
    border-radius: 5px;
    display:table;
    width:100%;
}

он будет работать как положено: http://codepen.io/gpetrioli/pen/EDtCq

конечно, вы можете не использовать display:table-cell, если это действительно не нужно. (а в вашем примере похоже, что это не так..)

person Gabriele Petrioli    schedule 12.07.2014
comment
Прохладный. Я запомню это, поскольку это, вероятно, решит и некоторые другие проблемы с таблицами, если я когда-нибудь столкнусь с ними. - person Kjeld Schmidt; 12.07.2014
comment
Отлично работает с вашим решением. Что бы вы сделали, чтобы избежать display:table-cell? - person Pierre; 12.07.2014
comment
@Goodux, я не заметил выровненный по вертикали текст. Если это несколько строк, то ваше решение просто отлично. - person Gabriele Petrioli; 12.07.2014

arrow_upward
0
arrow_downward

Попробуйте
p {
text-align: center;
margin: auto
}
и почему вы используете display:table-cell ?

person Community    schedule 12.07.2014
comment
Это не сработает. margin: auto; центрирует только объекты определенной ширины. - person Kjeld Schmidt; 12.07.2014
comment
Ага ! Но я думал, что этот пользователь будет устанавливать ширину и другие вещи, как он хочет. Может быть, мой ответ не поможет ему. - person Rahiil; 12.07.2014
comment
Это не работает / Это весь существующий код. Посмотрите на это как на список, и текст не всегда будет иметь одинаковую длину. - person Pierre; 12.07.2014
comment
Задавать фиксированную ширину css для строки текста не очень хорошая идея — это вынуждает вас переписывать стили при изменении текста и полностью стирает все шансы на отзывчивый дизайн. - person Kjeld Schmidt; 12.07.2014