CODEWITHSUNDEEP
htmlcssresponsive-design
curious1
curious1

Reputation: 14717

Center div vertically and horizontally inside another div

If you resize the results pane to make it narrower, you will see that the image area will be resized responsively.

I am hoping to make the text always centered vertically and horizontally when such resizing happens.

I am not able to find the right css for this.

.holders {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -150px; /*half of image width*/
}
.holder {
  float: left; /*this cannot be changed because we have a row of blocks like the example one in the bottom*/
  position: relative;
}
.text {
  position: absolute;
  top: 150px;
  /*this is not right at this moment*/
}
.img {
  width: 100%;
  height: auto;
}
<div style="position: fixed;top:0;left:0;width:100%;height:100%">
  <div class="holders">
    <div class="holder">
      <div class="text">
        This is text that should be in the center of the block vertically and horizontally
      </div>
      <img class="img" src="http://www.fnordware.com/superpng/pnggrad8rgb.png" />
    </div>
  </div>
</div>

Here is the JS Fiddle example.

Upvotes: 1

Views: 685

Answers (3)

Henrik Albrechtsson
Henrik Albrechtsson

Reputation: 1742

You are able to do the same thing with less code.

HTML

<div class="center">
  <p class="text">This is text that should be in the center of the block vertically and horizontally</p>
</div>

CSS

.center {
    -webkit-align-items: center;
    -webkit-justify-content: center;
    align-items: center;
    background: url('http://www.fnordware.com/superpng/pnggrad8rgb.png');
    display: -webkit-flex;
    display: flex;
    height: 300px;
    justify-content: center;
    width: 300px;
}

LINK

https://jsfiddle.net/4tx5h1tq/42/

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 371063

.holders {
  position: absolute;
  bottom: 0;
  left: 50%;
  /* margin-left: -150px; */
  transform: translateX(-50%);        /* see comments below */
}
.holder {
  float: left;
  position: relative;
}
.text {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;                           /* center text vertically */
  left: 50%;                          /* center text horizontally */
  transform: translate(-50%, -50%);   /* horizontal & vertical centering fine-tuning; 
                                         http://stackoverflow.com/a/36817384/3597276 */
}
.img {
  width: 100%;
  height: auto;
}
<div style="position: fixed;top:0;left:0;width:100%;height:100%">
  <div class="holders">
    <div class="holder">
      <div class="text">
        This is text that should be in the center of the block vertically and horizontally
      </div>
      <img class="img" src="http://www.fnordware.com/superpng/pnggrad8rgb.png" />
    </div>
  </div>
</div>

Revised Fiddle

Upvotes: 2

Joah Gerstenberg
Joah Gerstenberg

Reputation: 441

Have you considered using flexbox? It will do exactly what you want it to do, with minimal changes.

.holders {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -150px; /*half of image width*/

}
.holder {
  float: left; /*this cannot be changed because we have a row of blocks like the example one in the bottom*/
  position: relative;
}

.text {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.text p {
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
}
.img {
  width: 100%;
  height: auto;
}

Upvotes: 1

Related Questions