Хоризонтално центриране на текста в ‹p› дисплей: клетка-таблица?

Опитвам се да центрирам текста хоризонтално, но не става. Изглежда, че се дължи на дисплея: table-cell Знаете ли как да заобиколите проблема? (имайте предвид, че използвам bootstrap)

Благодаря! > 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
Great работи перфектно с вашето решение. Какво бихте направили, за да избегнете 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