親の真ん中に最大幅とテキストを配置する

Question

私の行の1つでは、最大幅を置いて、そのdiv内にテキストを配置したいと思います。：

マイホームページのテキストは、現在のように見える

私はこの1つのセクション内の最大幅と中央にテキストを配置したいと思います。

理想の結果：

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> 

ライブリンク：http://185.123.97.138/~kidsdrum/moneynest.co.uk/

Answer 1

たぶん私はあなたが正確に何を意味した理解が、これをしようとしなかった。

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

Answer 2

は、このコードを試してみてください。

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

私が設定しています流体widthの代わりにwidthが960pxと固定され、この容器を中心にmargin: auto;また、margin: auto;の作業を行うには、floatプロパティの設定を解除する必要があります。

Answer 3

ラップ固定widthのコンテンツまたは限界に達し幅max-width divが、それfloat:none;作り、左右の余白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

を設定します。また、動的なマージンに&幅の値を使用して、これをやってのけることができ浮動小数点数を変更したり、余白を使いたい場合はfloat: none;を使用しなければなりません。

.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

ブートストラップはすでにあなたのためにその仕事をしています。設定する必要があるのは、コンテナクラスの最大幅だけです。そうすることで、ページレイアウトの整合性を維持することができます。 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>