CSS HTML place a white square on an image

Question

I have a div that the entire background of it is an image. In the middle of an image I want to have a white box that has some text in it. I tried with relative position but that stretched out the parent.

Here is my code

 <div id="desk-linkedIn-image" style="background: url('img/linkedin/at_desk_linkdenIn_optimization.jpg');width: 100%;"> <div style="background-color: #FFFFFF; width: 475px; height: 46%;padding-left: 2%;"> <p style="font-size: 20px;"> Text Text Text</p> <p style="font-size: 20px;"> Text Text Text</p> <p style="font-size: 20px;">Text Text Text</p> </p> </div> </div> 

Answer 1

The essential settings for centering an element inside another element (both horizontally and vertically) are always these for the child element:

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

...plus - depending on the content - width and height settings, and position: relative on the parent element. It's also essential that the parent element has a defined height.

 html, body { margin: 0; height: 100%; } #desk-linkedIn-image { background: url(http://placehold.it/500x600/fd7) center center; background-size: cover; width: 100%; height: 100%; position: relative; } .x { background: #fff; width: 475px; width: 50%; height: 46%; padding-left: 2%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #desk-linkedIn-image .xp { font-size: 20px; } 

 <div id="desk-linkedIn-image"> <div class="x"> <p> Text Text Text</p> <p> Text Text Text</p> <p> Text Text Text</p> </div> </div> 

Note: Another approach is to use flexbox. Still, the method above is also compatible with old browsers, which flexbox isn't.

Answer 2

Try this:

<div id="desk-linkedIn-image" style="background: url('img/linkedin/at_desk_linkdenIn_optimization.jpg');width: 100%; position: relative" >
    <div style="background-color: #FFFFFF; width: 20%; height: 20%; left: 50%; top: 50%; margin-top: -5%;  margin-left: -5%; position: absolute">
        <p style="font-size: 20px;"> Text Text Text</p>
        <p style="font-size: 20px;"> Text Text Text</p>
        <p style="font-size: 20px;">Text Text Text</p>
    </div>
</div>

You might need to play around with the values a bit to find the correct center.

It should work because you can align child items relatively to their parents by specifically setting the parents' position as relative and the child's as absolute.

Answer 3

try giving the child div an absolute position,then a margin left and margin top,something like this

 <div id="desk-linkedIn-image" style="background: url('http://knowledgeoverflow.com/wp-content/uploads/2013/03/food_photography_burger_by_masterdev777-d3h1ryk.jpg');width: 100%;height: 100%;" > <div style="background-color: #FFFFFF; height: 150px;width:150px;position: absolute; margin-left:600px; margin-top: 215px"> <p style="font-size: 20px;"> Text Text Text</p> <p style="font-size: 20px;"> Text Text Text</p> <p style="font-size: 20px;">Text Text Text</p> </p> </div> </div>