Блог

Главная - Вопросы по программированию - Как установить текст абсолютно (CSS) в середине div, несмотря на изменение ширины div позади него?

Как установить текст абсолютно (CSS) в середине div, несмотря на изменение ширины div позади него?

#html #css

#HTML #css — файл #css

Вопрос:

Изображение показывает, чего я хочу достичь:

Что я хочу сделать

Вот код, который у меня есть:http://jsfiddle.net/ZNtKj/202 /

 <div style="width: 200px" >
 <div class="niveles-porcentaje">
     <div class="alta" style="width: 40%"> <span class="porcentaje">40%</span></div>
 </div>

И стиль, который мне трудно исправить:

 div.niveles-porcentaje {
    width:100%;
    height:100%;
    align-self:center;
    text-align:center;
    display:inline-table;
    background-color:#D7D7D7;

}
div.alta {
    display:inline-table; /*inside a table*/
    line-height: 2em;
    background-color: #06AC09;
    height:100%;
    float:left;

}
 span.porcentaje{
    text-align:center;
    vertical-align:middle;
    z-index:99;
}

Div будет находиться внутри td.

Комментарии:

1. Вы хотите 4 индикатора выполнения или изменить цвет в соответствии с процентами?

2. @AlexandreVicenzi Он хочет, чтобы текст располагался по центру всей панели; прямо сейчас он центрируется в разделе «Заполненный прогресс».

3. @hugomosh PS Z-index ничего не делает, если вы тоже не подадите заявку position .

Ответ №1:

Вам нужно будет сделать родительский текст во всю ширину. Чтобы сделать это, удалите задний цвет и width определение из .alta div и создайте внутренний абсолютный div для работы с цветовой заливкой, которая не будет мешать тексту.

Кроме того, не забудьте установить для текста span значение display: block во всю ширину. Проверьте здесь:http://jsfiddle.net/ZNtKj/209 /

  <div style="width: 200px" >
     <div class="niveles-porcentaje">
         <div class="alta">
             <div class="fill" style="width: 40%"></div>
             <span class="porcentaje">40%</span>
         </div>
     </div>
</div>

CSS — файл:

 div.niveles-porcentaje {
    width:100%;
    height:100%;
    align-self:center;
    text-align:center;
    display:inline-table;
    background-color:#D7D7D7;

}
div.alta {
    display:inline-table; /*inside a table*/
    line-height: 2em;
    height:100%;
    width: 100%;
    position: relative; 
}

div.alta .fill {
    background-color: #06AC09;
    height:100%;
    position: absolute;
}
 span.porcentaje{
    text-align:center;
    vertical-align:middle;
    z-index:99;
    position: relative;
    display: block;
}

Ответ №2:

Вот скрипка с примером. Вы можете просто изменить ширину текстового div, чтобы увидеть результат.

     div.niveles-porcentaje {
        width:100%;
        height:20px;
        align-self:center;
        text-align:center;
        background-color:#D7D7D7;
    position:relative;

    }
    div.alta {
        line-height: 2em;
        background-color: #06AC09;
        height:20px;
        float:left;
        position:relative;    

    }
     span.porcentaje{
         position:absolute;
         left:46%;
         top:0;
    }