divの上にテキストを配置する

Question

レスポンシブなdiv/image上の異なる場所（左上、上中央、上右、下左、下中央、右下）にテキストを配置しようとしています。幅は反応する。ここで

フィドル例です：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/

残りの問題は、下部のテキストは、そのベースラインに沿って整列されるということです。すべての大文字を使用すると、これは大丈夫です。