Позиционирование текста над div

Question

Я пытаюсь расположить текст в разных местах (верхний левый, верхний центр, правый верхний, нижний левый, нижний-центральный, нижний правый) над чувствительным div/изображением. Ширина чувствительна.

Вот скрипка пример: https://jsfiddle.net/Fawn721/os01fnmt/

.img-wrapper { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.img-wrapper .overlay-text { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    text-align: center 
 
} 
 

 
.img-wrapper .overlay-text p { 
 
    position: absolute 
 
} 
 

 
.img-wrapper .overlay-text p.center { 
 
    top: calc(50% - 1rem); 
 
    left: 0; 
 
    width: 100%; 
 
    color: #000 
 
} 
 

 
.img-wrapper .overlay-text p.top-left { 
 
    top: 0; 
 
    left: 0 
 
} 
 

 
.img-wrapper .overlay-text p.top-center { 
 
    top: 0; 
 
    right: 0; 
 
    left: 0 
 
} 
 

 
.img-wrapper .overlay-text p.top-right { 
 
    top: 0; 
 
    right: 0 
 
} 
 

 
.img-wrapper .overlay-text p.bottom-left { 
 
    bottom: 0; 
 
    left: 0 
 
} 
 

 
.img-wrapper .overlay-text p.bottom-center { 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0 
 
} 
 

 
.img-wrapper .overlay-text p.bottom-right { 
 
    bottom: 0; 
 
    right: 0 
 
}

<div class="img-wrapper"> 
 
    <img class="lazyload" data-sizes="auto" alt="Mobile is the default image" 
 
     src="https://placeholdit.imgix.net/~text?txtsize=33&txt=900%C3%97150&w=900&h=150" 
 
     data-src="https://placeholdit.imgix.net/~text?txtsize=33&txt=414%C3%97150&w=414&h=150"> 
 
    <div class="overlay-text"> 
 
    <p class="top-left">&lt;p class="top-left"&gt;Top Left&lt;/p&gt;</p> 
 
    <p class="top-center">&lt;p class="top-center"&gt;Top Center&lt;/p&gt;</p> 
 
    <p class="top-right">&lt;p class="top-right"&gt;Top Right&lt;/p&gt;</p> 
 
    <p class="bottom-left">&lt;p class="bottom-left"&gt;Bottom Left&lt;/p&gt;</p> 
 
    <p class="bottom-center">&lt;p class="bottom-center"&gt;Bottom Center&lt;/p&gt;</p> 
 
    <p class="bottom-right">&lt;p class="bottom-right"&gt;Bottom Right&lt;/p&gt;</p> 
 
    </div> 
 
</div>

Answer 1

p метка имеет поле по умолчанию, которые активны в вашей скрипке. Добавьте это:

overlay-text > p { 
    margin: 0; 
    padding: 0; 
} 

https://jsfiddle.net/60xszm8b/2/

Оставшейся проблема заключается в том, что в нижней части текст будет выровнен по своей базовой линии. Если вы используете все заглавные буквы, это выглядит нормально. (Для этого вы можете использовать text-transform: uppercase;, хотя вам, возможно, придется сделать размер текста меньше, чем все, что в нем)