CODEWITHSUNDEEP
htmlcss
Deke
Deke

Reputation: 4659

How do I center a div ontop of another div that has inline block

I'm trying to center a text div on top of box div that has inline block. I tried using position: absolute on the text div. But when the browser screen is shrunk or expanded, the positioning of the text div gets messed up. How to fix this?

.mainDiv {
  margin: auto;
  width: 100%;
  padding: 10px;
  left: 300px;
  text-align: center;
}

.box {
  background-color: red;
  width: 100px;
  height: 100px;
  display: inline-block;
}

.text {
  background-color: blue;
  position: absolute;
  top: 70%;
  left: 45%;
}
<div class="mainDiv">
  <div class="box"></div>
  <div class="text">text</div>
</div>

Upvotes: 0

Views: 63

Answers (4)

PHP Geek
PHP Geek

Reputation: 4033

.mainDiv {
text-align: center;
}

.box {
background-color: red;
width: 100px;
height: 100px;
display: inline-block;
margin-top: 19px;
}

.text {
  background-color: blue;
  position: absolute;
  margin: -19px 0 0 36px;
}

<div class="mainDiv">
  <div class="box">
  <div class="text">text</div>
</div>
</div>

Upvotes: 0

Carl Binalla
Carl Binalla

Reputation: 5401

If you want, you can make the blue div a child of the red div so that the blue div will always be relative to the red div. I also added position:relative to the red div, and used transform:translate to the blue div.

If I'm not mistaken, this is also responsive, so try shrinking your browser.

.mainDiv {
  margin: auto;
  width: 100%;
  padding: 10px;
  left: 300px;
  text-align: center;
}

.box {
  background-color: red;
  width: 100px;
  height: 100px;
  display: inline-block;
  position:relative;
}

.text {
  background-color: blue;
  position: absolute;
  left: 50%;
  transform:translate(-50%, -100%);
}
<div class="mainDiv">
  <div class="box">
    <div class="text">text</div>
  </div>
</div>

Upvotes: 0

Chris Boon
Chris Boon

Reputation: 1387

I assume you are using inline-block to center the .box inside the .main-div. Technically, with your current html structure you can't center the .text element on the .box one, but you can center it on .main-div, which is essentially the same thing in your example.

I would start by adding position: relative to .main-div. An absolutely positioned element is positioned based on it's nearest ancestor that has a positioning context. The easiest way to set this is to add position: relative.

Then with your .text element you can adjust to:

.text {
  background-color: blue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50% );
}

This works because top and left position the top and left element from the top and left of its parent. So the top of .text would start 50% of the way down .main-div, and likewise with left. This would leave your text too far down and to the left.

transform: translate values work differently - they are based on the size of the element itself. So -50% will move an element back half of its width or height. By setting it on both width and height we are moving the .text so that instead of its top and left edges being at 50%, it's center is at 50%.

.mainDiv {
  position: relative; /* added to make .text align relative to this, not the document */
  margin: auto;
  width: 100%;
  padding: 10px;
  /* left: 300px; (I removed this for demo purposes, but if you need it you can add it back in) */
  text-align: center;
}

.box {
  background-color: red;
  width: 100px;
  height: 100px;
  display: inline-block;
}

.text {
  background-color: blue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50% ); /*pull the text left and up 50% of the text's size*/
}
<div class="mainDiv">
  <div class="box"></div>
  <div class="text">text</div>
</div>

Upvotes: 2

michaelprflores
michaelprflores

Reputation: 31

The markup for text should be written first then the box. Then you may try using block instead of inline-block, then set the width of the text to 100 percent, display block and 'margin: 0 auto'. Also, maybe consider using the appropriate semantic tags as opposed to divs if you can. Also, I suspect the top and left rules to be causing the text to not align properly. You should no longer need position:absolute either.

Upvotes: 0

Related Questions