1. ホーム
  2. html

[解決済み] ジャンボトロンのセンター出しは?

2022-03-12 02:30:14

質問

ジャンボトロンをページの中央に配置するにはどうすればよいですか?
私はすでに col-lg-6float-lg-center .

.jumbotron {
  min-width: 585px;
  margin: 10px auto;
  display: flex;
  justify-content: center;
  margin: 10px 10px 10px 10px;
  border: 0.08em solid black;
}

h1 {
  font-size: 6em;
  color: #484949;
}

#socDesc {
  color: black;
}

body {
  min-width: 520px;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />

<div class="col-lg-8 col-md-10 col-sm-12 col-xs-12 offset-lg-2 offset-md-1 float-md-center">
  <div class="jumbotron">
    <div class="container">
      <div class="container-fluid">
        <div class="column">
          <h1 class="text-center">Society</h1>
          <hr />
          <h4 class="text-center">"That's one small step for a man, one giant leap for mankind" - Neil Armstrong</h4>
          <hr />
          <div class="figure">
            <div class="row">
              <div class="col-lg-6 col-md-5 col-sm-4 col-xs-3">
                <img id="" class="figure-img img-fluid rounded" src='http://4.bp.blogspot.com/-1tvR6wEiwiI/VYJSH4pfrsI/AAAAAAAABa8/RoQtTAtnD6Q/s1600/PBS.jpg' />
              </div>
              <div class="col-lg-6 col-md-5 col-sm-4 col-xs-3">
                <img id="" class="figure-img img-fluid rounded" src='http://www.extremetech.com/wp-content/uploads/2013/04/lhc17.jpg' />
              </div>
            </div>
            <!-- row-->
            <figcaption class="figure-caption">This is the Large Ha</figcaption>
            <hr />
          </div>
          <!-- figure -->
        </div>
        <!-- column -->
      </div>
    </div>
  </div>
</div>

Codepenで見る

解決方法は?

試す <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 offset-3 float-md-center"> これでうまくいったのですが offset-xs-3 の方がより適切かもしれません。 codepenではなぜかうまくいきませんでしたが、すべての画面サイズで同じ量のカラムが必要な場合のみ col-xs-6 と入力すると、すべての大きな画面サイズにそれが適用されます。