iframe2つを中央配置したい場合について

前提・実現したいこと

2つのiframeをページ中央に並べて配置したい

発生している問題・エラーメッセージ

・左側のiframeの真下に右側（に並べたいはずの）iframeが配置されてしまう
・（現状は違いますが、）いじっていた際に横並びにはなったがページ上部にぴったりiframeがくっついてしまう

該当のソースコード

HTML>

css>
.iframe-content {
position: relative;
margin: 10px;
text-align: center;
}

.iframe-content iframe {
border: 0px;
border-color: #fff;
border-radius: 30px;
overflow: hidden;
display: inline-block;
}

試したこと

圧倒的知識不足は痛感しておりますが、中央よせで検索して出てくるもの（e.g. text-align / -webkit-transform など）はいろいろ試してみましたがうまく設定できず、どこをどのようにすれば解決できるのか分からなくなってしまい質問させて頂いております。
iframeのdisplayについての知識が不足しており、iframeはいったいどの値（block, inline, inline-block)を取るものなのかが分からずdisplayの記述が違うのかな、などいろいろ思って試しましたが悪い部分が一か所ではないのか、うまく治りませんでした。
初心者ゆえ情けない質問で申し訳ありませんが、ご教示頂ければ幸いです。

補足情報（FW/ツールのバージョンなど）

行動規範の内容に同意します

回答1件

すごく簡単な回答ですが下記内容に変更すれば「横並び」は出来ます。
ただ要素か重なりますし、レスポンシブする際にも大きな問題が山積みになる設計だと思いますのであまりおすすめはしません。
※便箋的に直接css書いていますがファイルを分けてください。
※変更箇所はhtml側のiframeのwidthをpx→%に変更。css側でfloat:left;にしています。
※display:flexを使う方がいいと思います。

html
1
2<!DOCTYPE html>
3<html lang="ja" dir="ltr">
4  <head>
5    <meta charset="utf-8">
6    <title></title>
7  </head>
8  <body>
9
10    <style>
11      .iframe-content {
12position: relative;
13margin: 10px;
14text-align: center;
15}
16
17.iframe-content iframe {
18border: 0px;
19border-color: #fff;
20border-radius: 30px;
21overflow: hidden;
22float:left;
23/*display: inline-block;*/
24}
25</style>
26
27
28    <body>
29    <div class="iframe-content">
30    <iframe src="menu.html" name="menu" scrolling="no" width="20%" height="800px">　
31    </iframe>
32    </div>
33    <div class="iframe-content">
34    <iframe src="top.html" name="main" width="80%" height="800px">
35    </iframe>
36    </div>
37    </body>
38
39  </body>
40</html>
41
42

投稿2019/05/03 04:32

編集2019/05/03 04:35

wataame

総合スコア302

退会済みユーザー

2019/05/03 06:23

早速ご回答くださってありがとうございます。教えていただいた通りにためしてみたのですが、やはりどうにもframeが中央にならんで表示されず、「左上から横並びに2つ表示」されるのみとなってしまいました。ご指摘の通りよくない構成であることは確かですし、左部の表記を変えてiframeは一つにすることで代用しようと思います。ありがとうございました。