Albert Albert - 2 months ago 8
CSS Question

How To Properly Center A Div Inside A Div

It needs to be responsive, so it appears to work until you resize to a smaller screen width and elements start unproportionally. Here is a JSfiddle link: https://jsfiddle.net/gn8L0rxu/

I need the "home-slider-caption col-sm-12" smack dab in the middle with it resizing properly to different browser sizes.



section.home-slider {
background-repeat: no-repeat;
background-position: center;
background-color: black;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
min-height: 630px;
position: relative;
}

section.home-slider .home-slider-caption {
width: 60%;
position: absolute;
top: 50%;
right: 25%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 1;
}
section.home-slider h1 {
color: #fff;
letter-spacing: -4px;
font-size: 5em;
font-weight: 100;
line-height: 1;
text-align: center;
}
section.home-slider p {
font-size: 1.3em;
color: #fff;
margin-bottom: 20px;
text-align: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<section class="home-slider" id="top">
<div class="container">
<div class="home-slider-caption col-sm-12">
<h1>Sell Your Textbooks</h1>
<p>We'll pay top dollar for your used books!</p>
<a href="sell.html" class="btn btn-outline btn-primary btn-icon active btn-lg btn-rounded">Start Selling!<span class="fa fa-angle-right icon-with-btn"></span></a>
</div>
</div>
</section>




Answer

If i true understand questions, you must do this:

section.home-slider .home-slider-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%,-50%);  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index: 1;
}

And don't use col-* without .row

Comments