So zentrieren Sie eine Div innerhalb einer Div

Sie muss reaktionsbereit sein, sodass sie so lange funktioniert, bis Sie die Größe auf eine kleinere Bildschirmbreite ändern und die Elemente unproportional beginnen. Hier ist ein JSfiddle Link: https://jsfiddle.net/gn8L0rxu/So zentrieren Sie eine Div innerhalb einer Div

Ich brauche die "Home-Slider-Beschriftung Col-sm-12" Smack Dab in der Mitte mit der Größe der Größe auf verschiedene Browsergrößen.

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>

Quelle

2016-09-30 Albert

möglich doppelte http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontal –

Wenn ich echte Fragen verstehen, müssen Sie dies tun:

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; 
}

und verwenden COL- nicht * ohne .row

Quelle

2016-09-30 08:37:11

Es funktionierte perfekt, spasiba! Wie würde ich den Button auch ausrichten? – Albert

Sie wonna das? https://jsfiddle.net/gn8L0rxu/4/

Start Selling!

–

So zentrieren Sie eine Div innerhalb einer Div

Antwort

Verwandte Themen