Выровнять текст под фоном

Question

У меня проблема с CSS. Мне нужно, чтобы текст выравнивался под стрелкой (фоновое изображение). Но фоновое изображение должно оставаться в левом верхнем углу div.

Вот что я имею в виду:

Текст находится прямо под стрелкой, но я хочу, чтобы выровнять в центре под стрелкой. Как мне это сделать?

HTML

<div class="defArrow" id="def_red_low"> 
    RED 
</div> 
<div class="defArrow" id="def_yellow"> 
    YELLOW 
</div> 
<div class="defArrow" id="def_green"> 
    GREEN 
</div> 
<div class="defArrow" id="def_blue"> 
    BLUE 
</div> 
<div class="defArrow" id="def_red_high"> 
    RED 
</div> 

CSS

.defArrow { 
    position: absolute; 
    top: 107px; 
    left: 42px; 
    float: left; 
    background: url('../images/up_arrow.png') no-repeat top center; 
    display: block; 
    width: 20px; 
    height: 20px; 
    line-height: 60px; 
    font-size: 12px; 
} 

Любая помощь будет оценена.

Answer 1

вы можете улучшить ширину div и установить выравнивание текста как центр. Ваш div allready является абсолютным. Таким образом, вы можете использовать центр div как относительный ноль. Для моего CSS, это 51px

.defArrow { 
    position: absolute; 
    top: 107px; 
    left: 42px; 
    float: left; 
    background: url('https://upload.wikimedia.org/wikipedia/en/7/72/Dark_Green_Arrow_Up.png') no-repeat top center; 
    display: block; 
    background-size:20px 20px; 
    background-position:center top; 
    width: 101px; 
    height: 20px; 
    line-height: 60px; 
    font-size: 12px; 
    text-align:center 
} 

jsfiddle

Answer 2

.defArrow { 
    position: absolute; 
    top: 107px; 
    left: 42px; 
    float: left; 
    background: url('../images/up_arrow.png') no-repeat top center; 
    display: block; 
    width: 20px; 
    height: 20px; 
    line-height: 60px; 
    font-size: 12px; 
} 

Необходимо удалить ширину кода css. Потому что согласно вашему коду ваш текст должен прийти в центр, но когда вы используете width:20px, что очень мало, поэтому его, похоже, выравнивают влево.

Попробуйте удалить ширину из css, она будет работать нормально.

Answer 3

Если вы хотите оставить фон расположен в top left в DIV, то вам нужно обернуть свое содержание в другом absolute DIV и совместите его со стрелкой изображения. Вот некоторые jsFiddle.

HTML

<div class="defArrow" id="def_red_low"> 
    <div class="arrows-text">YELLOW</div> 
</div> 

CSS

.defArrow { 
    position: absolute; 
    top: 107px; 
    left: 42px; 
    float: left; 
    background: url('../images/up_arrow.png') no-repeat top center; 
    display: block; 
    width: 20px; 
    height: 20px; 
    line-height: 60px; 
    font-size: 12px; 
} 
.arrows-text{ 
    position:absolute; 
    top:0; 
    left:50%; 
    margin-left:-100px; 
    width:200px; 
    text-align:center; 

} 

Хотя, я думаю, чтобы изменить положение фона для top center и text-align:center; ваш контент более разумный способ.

Answer 4

<div class="colors"></div> 

<div class="defArrow arrowRed" id="def_red_low"> 
    RED 
</div> 
<div class="defArrow arrowYellow" id="def_yellow"> 
    YELLOW 
</div> 
<div class="defArrow arrowGreen" id="def_green"> 
    GREEN 
</div> 
<div class="defArrow arrowBlue" id="def_blue"> 
    BLUE 
</div> 



.colors{ 
    border:1px solid #CCCCCC; 
    height:20px; 

} 

.defArrow { 
    position: absolute; 
    top: 30px; 
    float: left; 
    background: url('https://upload.wikimedia.org/wikipedia/en/7/72/Dark_Green_Arrow_Up.png') no-repeat top center; 
    background-size:20px 20px; 
    display: block; 
    height: 20px; 
    line-height: 60px; 
    font-size: 12px; 
} 

.arrowYellow{ 
    left: 100px; 
} 

.arrowGreen{ 
    left: 200px; 
} 

.arrowRed{ 
    left: 300px; 
} 

.arrowBlue{ 
    left: 400px; 
} 

Вы можете попробовать this!

Благодаря Kamuran для ссылки на стрелку :).