質問: ### 前提・実現したいこと 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/ツールのバージョンなど)
回答: すごく簡単な回答ですが下記内容に変更すれば「横並び」は出来ます。 ただ要素か重なりますし、レスポンシブする際にも大きな問題が山積みになる設計だと思いますのであまりおすすめはしません。 ※便箋的に直接css書いていますがファイルを分けてください。 ※変更箇所はhtml側のiframeのwidthをpx→%に変更。css側でfloat:left;にしています。 ※display:flexを使う方がいいと思います。 ``` ``` !イメージ説明