Einlochen max-width und Ausrichten von Text in der Mitte der Mutter

Question

In einem meine Reihe des Ich möchte eine maximale Breite setzen und meinen Text zentriert in diesem div.

Meine Homepage Text sieht derzeit wie::

Ich mag würde eine maximale Breite setzen und den Text in diesem Abschnitt zentriert.

Ideal Ergebnis:

CSS

.homepage-text { 
    font-size: 130%; 
} 

.light-section { 
     background-color: lightblue; 
    /* color: white; */ 
     text-align: center: 
    } 

HTML

 <div class="row light-section"> 
     <div class="col-sm-12"> 
    <div class="col-sm-12 homepage-text"> 

<p>Text sit's here</p> 
</div></div></div> 

Link-210

Live-:http://185.123.97.138/~kidsdrum/moneynest.co.uk/

Answer 1

Vielleicht habe ich nicht genau verstehen, was hast du meinst, aber versuchen, diese:

.homepage-text { 
    font-size: 130%; 
    max-width: 1000px; 
    margin: 0 auto; 
    float: none; 
} 

Answer 2

Versuchen Sie diesen Code:

.homepage-text { 
    font-size: 130%; 
    width: 960px; 
    margin: auto; 
    float: none; 
} 

I festgelegt haben ein width von 960px anstelle eines Fluid width von 100% und in der Mitte dieses Behälters mit margin: auto; festen Auch müssen Sie die float Eigenschaft unset die margin: auto; Werke zu machen.

Answer 3

Wickeln Sie den Inhalt in einem festen width oder maxed Breite max-width div, dann machen es float:none; und stellen Sie die rechten und linken Ränder auto !important

<div class="row light-section"> 
<div class="col-sm-12"> 
<div class="col-sm-12 homepage-text" style="width: 400px; float: none;margin: 0 auto !important;"> 

<p>Text sit's here</p> 
</div> 
</div> 
</div> 

Answer 4

Sie auch diese weg mit dynamischen Marge & Breitenwerte ziehen könnte, ohne den Schwimmer zu verändern, noch mit margin: 0 auto; (Wenn Sie diesen Spielraum nutzen wollen, werden Sie float: none; haben sonst zu verwenden, wird es nicht automatisch die Homepage-Text zentrieren.)

.homepage-text { 
    font-size: 130%; 
    margin: 0 25% 0 25%; // Same as margin: 0 25%; but it illustrates 25+25+50=100% 
    width: 50%; 
} 

Answer 5

Bootstrap hat diese Aufgabe bereits für Sie erledigt. Sie müssen nur die maximale Breite der Containerklasse festlegen. Dies hilft, die Konsistenz im Seitenlayout zu erhalten. Here is the fiddle.

.container { 
 
    max-width:700px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="container"> 
 
    <p>Text sit's here</p> 
 
    </div> 
 
</div>