ブートストラップを使用してコンテンツをセンターするにはどうすればよいですか？

Question

私はこの件に関してthisスレッドを読んでいました。しかし、これがブートストラップに焦点を当てたサイトを作成する私の最初の日であるため、私はまだ基​​礎を学んでいるので、私は誤りがあれば事前にお詫びします。

私は自分のすべてのコンテンツを次々に集中させようとしていました。しかし、私のイメージは中央に見えません。ヘッダーと3つのボックスの中央に配置して整列させるにはどうすればよいですか？

私の完全なコードは以下のとおりです。

.body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.header-title { 
 
    text-align: center; 
 
    color: black; 
 
    font-weight: bold; 
 
    font-family: 'Roboto', sans-serif; 
 
} 
 

 
.intro-text { 
 
    text-align: center; 
 
    color: black; 
 
    font-family: 'Roboto', sans-serif; 
 
} 
 

 
.p { 
 
    text-align: center; 
 
    color: black; 
 
    font-family: 'Roboto', sans-serif; 
 
} 
 

 
.center-block { 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    height: 250px; 
 
    width: 250px; 
 
    border-radius: 25px; 
 
    background: #4D5061; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="header-title"> 
 
    <h1>ABOUT ME</h1> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="span4"><img class="center-block" src="http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg" /></div> 
 
    </div> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-4"> 
 
     <div class="well"> 
 
      <h3>Column 1</h3> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> 
 
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
     <div class="well"> 
 
      <h3>Column 2</h3> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> 
 
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
     <div class="well"> 
 
      <h3>Column 3</h3> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> 
 
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

Answer 1

のみ「行」に「コンテナ」からライン＃58のクラスを変更、クラスのコンテナは「左右にパディングを追加します。

ライン＃58

<div class="container"> 

変化に：

<div class="row"> 

Answer 2

あなたのコンテナは、すべてのWebページ、問題1を含める必要があります。 第2に、画像に影響する画像ブロックのコアCSSを調整しました。

ブートストラップは12グリッドシステムでも作成されます。あなたのウェブページを表示するときにこれを利用してください。

ここでは、必要な作業を行うワイヤフレーム設計を示します。あなたは合うように内容を変更する必要がありますが、レイアウトはあなたが後であると思っているものです。

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <h3 class="text-center"> 
       h3. Lorem ipsum dolor sit amet. 
      </h3> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-5"> 
     </div> 
     <div class="col-md-2"> 
      <img alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" /> 
     </div> 
     <div class="col-md-5"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-4"> 
      <p> 
       Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small> 
      </p> 
     </div> 
     <div class="col-md-4"> 
      <p> 
       Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small> 
      </p> 
     </div> 
     <div class="col-md-4"> 
      <p> 
       Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small> 
      </p> 
     </div> 
    </div> 
</div>