[解決済み】iframeを水平方向にセンタリングする方法は?
2022-01-30 20:18:37
質問
次のような例を考えてみましょう: ( ライブデモ )
HTMLです。
<div>div</div>
<iframe></iframe>
CSSです。
div, iframe {
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #777;
}
結果
なぜ
iframe
のように中央揃えではありません。
div
? どうすれば中央揃えになりますか?
解決方法は?
追加
display:block;
をiframeのcssに追加してください。
div, iframe {
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #777;
}
iframe {
display: block;
border-style:none;
}
<div>div</div>
<iframe src="data:,iframe"></iframe>
関連
-
[解決済み】エラー。要求されたURL"[no URL]"は無効です。
-
[解決済み] ボディの背景色が表示されない?
-
[解決済み] HTML5 Canvas 要素でカスタムフォントを使用するにはどうすればよいですか?
-
[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか?
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] チェックボックスとそのラベルをクロスブラウザーで一貫して揃える方法
-
[解決済み] inline/inline-block要素間のスペースを削除するにはどうすればよいですか?
-
[解決済み] divブロック内のテキストを(水平方向と垂直方向に)センタリングするにはどうすればよいですか?
-
[解決済み】CSSを使用して、すべてのブラウザでdiv要素を垂直方向に中央に配置するにはどうすればよいですか?
-
[解決済み】Iframeをコンテナの残り高さの100%にフィットさせる
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】このインラインブロックのdiv要素の間に説明のつかない隙間があるのはなぜですか?[重複]
-
[解決済み】Markdownで'target="_blank"'でリンクを作成することはできますか?
-
[解決済み】Telegramマークダウンの構文。太字 *と* イタリック?(2018年9月)
-
[解決済み] html : iframeでhtmlのコンテンツが表示されない。
-
[解決済み] IE=edge,chrome=1というのは今でも有効なのでしょうか?
-
[解決済み] テーブルセルの背景を透明にする方法
-
[解決済み] div に斜めのエッジを作成する [重複] 。
-
[解決済み] HTMLのテーブルを部分的に透明にするには?
-
[解決済み] 順序なしリストが div 内で左いっぱいに整列されない
-
[解決済み] HTML CSS インビジブルボタン