[解決済み] ジャンボトロンのセンター出しは?
2022-03-12 02:30:14
質問
ジャンボトロンをページの中央に配置するにはどうすればよいですか?
私はすでに
col-lg-6
と
float-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>
解決方法は?
試す
<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
と入力すると、すべての大きな画面サイズにそれが適用されます。
関連
-
[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか?
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか?
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] divブロック内のテキストを(水平方向と垂直方向に)センタリングするにはどうすればよいですか?
-
[解決済み] div内の要素を縦に並べるにはどうしたらいいですか?
-
[解決済み] input type="file "ボタンのスタイリング
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] HTMLにおける'"'エンティティの使用法
-
[解決済み] 横型リストアイテム
-
[解決済み] HTML IFステートメント
-
[解決済み] input type="button "に背景画像を追加するには?
-
[解決済み] HTMLのid属性に有効な値は何ですか?
-
[解決済み] Sublime Text 2を使ってHTMLコードを再フォーマットするにはどうしたらいいですか?
-
[解決済み] divの内容を下に揃える方法
-
[解決済み] ボディの高さをブラウザの高さの100%にする
-
[解決済み] HTMLアンカーは'name'と'id'のどちらで作成するのが良いですか?
-
[解決済み] 静的な HTML ページにファビコンを追加する