Question beaten, but I can not cope. There is an external div with an internal div and full-width picture.

I can not center the text over the image

<div class="one"> <div class="two">Text</div> <img class="full" src="https://pp.vk.me/c630828/v630828919/5293e/hThcyFPuX24.jpg"> </div>

css

 .one { background-color: #ccc; } .two { width: 40%; height: 40%; margin: 0px auto; text-align: center; } .full { width:100%; height: auto; }
  • Better to attach the full code so that those who wish to help could immediately copy themselves and correct, rather than write themselves. - Sleepy Panda

2 answers 2

We apply absolute positioning + margin: auto;

 * { margin: 0; padding: 0; } .one { background-color: #ccc; position: relative; } .two { width: 40%; height: 40%; margin: 0px auto; text-align: center; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; background: #ccc; } .full { width: 100%; height: auto; } 
 <div class="one"> <div class="two">Text</div> <img class="full" src="https://pp.vk.me/c630828/v630828919/5293e/hThcyFPuX24.jpg"> </div>

  • thanks, helped - Leaverk Vands

It is possible through the flex property

 * { margin: 0; padding: 0; } .one { display: flex; height: 300px; background:url(https://pp.vk.me/c630828/v630828919/5293e/hThcyFPuX24.jpg) no-repeat center; background-size: contain; } .two { margin: auto; background: red; padding: 20px; } 
 <div class="one"> <div class="two">Text</div> </div>