文字を画像の中央に
top:50%、left:50%とすることで文字の左端が画像の中央に配置されます。
加えてtransform:translate(-50%,-50%)で文字のずれを修正することができます。
.example {
position: relative;
}
.example p {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
margin:0;
padding:0;
/*文字の装飾は省略*/
}
.example img {
width: 100%;
}
