Центр выравнивает текст "span" внутри div

У меня есть HTML-код:

<div class="left">
<span class="panelTitleTxt">Title text</span>
</div>

Мой CSS выглядит следующим образом:

.left {
    background-color: #999999;
    height: 50px;
    width: 24.5%;
}
span.panelTitleTxt {
                display: block;
                width: 100%;
                height: 100%;
}

Теперь как выравнивать центр текста внутри div? (Предположим, что "левый" div после преобразования% получает ширину px 100px)

Я попробовал стандартный способ использования margin:auto, но это не работает.

Также я хочу избежать использования text-align:center.

Есть ли другой способ этого?

Ответ 1

Вы предоставляете диапазон ширины 100%, в результате чего он расширяется до размера родителя. Это означает, что вы не можете центрировать его, так как нет места для его перемещения.

Вы можете задать диапазон ширины набора, а затем снова добавить margin:0 auto. Это позволит выровнять по центру.

.left 
{
   background-color: #999999;
   height: 50px;
   width: 24.5%;
}
span.panelTitleTxt 
{
   display:block;
   width:100px;
   height: 100%;
   margin: 0 auto;
}

Ответ 2

Если вы знаете ширину пролета, вы можете просто заполнить левый край.

Попробуйте следующее:

.center {text-align: center}
div.center span {display: table; }

Добавьте "center: class" к вашему.

Если вы хотите, чтобы некоторые промежутки были центрированы, но не другие, замените "div.center span" в таблице стилей на класс (например, "центр-span" ) и добавьте этот класс в диапазон.