fightstarr20 fightstarr20 - 3 months ago 17
CSS Question

CSS vertically and horizontally position text over an image

I am trying to vertically and horizontally center the div banner_title within another div like this...



.box {
text-align: center;
}
.banner_title {
font-size: 32px;
position: absolute;
top: 50%;
width: 100%;
}
.banner_title > div {
background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
color: #fff;
padding: 15px;
}

<div class="box">
<img src="http://dummyimage.com/1000x400/b895b8/fff.jpg&text=+">
<div class="banner_title">
<div>
THIS MESSAGE IS A TEST MESSAGE
</div>
<button>
This is a test button
</button>
</div>
</div>





also on https://jsfiddle.net/j90gaawb/

This isn't working for me, can anybody help?

This is what I am trying to achieve...

enter image description here

Answer

I would recommend the following method

CSS

.box{
  text-align:center;
  display: table;
  width: 100vw;
  height: 100vh;
}

.banner {
  font-size: 32px;
  display: table-cell;
  vertical-align: middle;
  height; auto;
  background-image: url('http://dummyimage.com/1000x400/b895b8/fff.jpg&text=+');
  background-size: cover;
 }

.banner_title {
  background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;color: #fff;
  display: inline-block;
}

.banner_title > div {
  padding: 15px;
}

HTML

<div class="box">
    <div class="banner">
      <div class="banner_content">
        <div class="banner_title">
        THIS MESSAGE IS A TEST MESSAGE
       </div>
       <div>
         <button>
           This is a test button
         </button>
       </div>
      </div>
  </div>
</div>

https://jsfiddle.net/j90gaawb/6/