0

As the title states i've tried searching but i cant get a border w/ text inside of it to center inside of a background image. As of right now it just centers but sticks to the top (if that makes sense).

.banner {
  background-image: url("http://www.hdwallpapers.in/walls/early_snowfall-wide.jpg");
  background-size: cover;
  background-position: bottom center;
  height: 400px;
  width: 100%;
}

#banner-content {
  border: 1px solid #FFF;
  margin: auto;
  text-align: center;
  width: 40%;
}
  <div class="banner">
    <div id="banner-content">
      <h1>Random misc text for the purpose of practicing</h1>
    </div>
  </div>

Thanks for the help in advance!

laernu
  • 11
  • Are you asking for vertical align ? – Jones Joseph Jan 01 '17 at 17:13
  • centering, as in auto-centering inside the window size up/down, left/right? question's unclear. – Funk Forty Niner Jan 01 '17 at 17:15
  • *"but sticks to the top (if that makes sense)."* - it doesn't describe the results you're looking to get. Edit your question with the desired result/effect. Google "center div horizontally in window and vertically". – Funk Forty Niner Jan 01 '17 at 17:17
  • try this : https://jsfiddle.net/zg2dfw6n/ ... using `position:relative` in `banner` class and `position:absolute; top:50%;left:50%;transform:translate(-50%,-50%);` for `banner-content` ... it will positioning `banner-content` (upper left corner) at the center of `banner` and `transform:translate(-50%,-50%);` will pull left and up for 50% of width/height `banner-content`. – nelek Jan 01 '17 at 17:20

1 Answers1

1

Add display: flex; to banner class ; And also add display: inline-flex to your banner-content ID . As here :

.banner {
  background-image: url("http://www.hdwallpapers.in/walls/early_snowfall-wide.jpg");
  background-size: cover;
  background-position: bottom center;
  height: 400px;
  width: 100%;
  display: flex;
}

#banner-content {
  border: 1px solid #FFF;
  margin: auto;
  text-align: center;
  width: 40%;
  display: inline-flex;
}
  <div class="banner">
    <div id="banner-content">
      <h1>Random misc text for the purpose of practicing</h1>
    </div>
  </div>

Edited

If you don't want words came out of border when the screen is small , add this code to your style:

.banner h1{
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
}
Majid Nayyeri
  • 447
  • 3
  • 15
  • This worked perfectly, only issue now is that the text inside the border does not stay inside the border when I make the browser window smaller as if it was on an iphone screen. – laernu Jan 01 '17 at 18:37
  • @laernu edited. – Majid Nayyeri Jan 01 '17 at 18:42
  • Thanks a bunch dude. This worked perfectly unfortunately I don't know what any of those properties are lol. But none the less still very new to this so ill keep reading and i'm sure eventually ill come across them. – laernu Jan 01 '17 at 19:46
  • @laernu don't mention it dude ;) you can choose my answer as the best with that check mark next to my answer ! – Majid Nayyeri Jan 01 '17 at 21:04