How to center an iframe code for webpage?

Question

Here is the code I want to have centered in the page element...right now it aligns itself to the left:

<iframe id="booking-iframe" sandbox="allow-top-navigation allow-scripts 
  allow-same-origin" style="width: 100%; height: 360px" frameborder="0" 
  src="https://booking.hospitable.com/widget/external/684862"></iframe>

Any help is appreciated...thank you!

Does this answer your question? [How to center an iframe horizontally?](https://stackoverflow.com/questions/8366957/how-to-center-an-iframe-horizontally) — isherwood, Mar 17 '22 at 18:31
Are you referring to having the content inside the iframe central? — Toby Okeke, Mar 23 '22 at 16:02

score 0 · Answer 1 · answered Mar 17 '22 at 19:17

0

Put it in a .

Code:

HTML

<div class="center">
   <iframe id="booking-iframe" sandbox="allow-top-navigation allow-scripts 
     allow-same-origin" style="width: 100%; height: 360px" frameborder="0" 
     src="https://booking.hospitable.com/widget/external/684862"></iframe>
</div>

CSS

.center {
        text-align:center;
        width:100%;
}

Hope I helped :)

answered Mar 17 '22 at 19:17

Nick S

1
3

Thanks Nick..unfortunately, that didn't work. It's still oriented to the left of the iframe. – toekneeoeeo Mar 18 '22 at 20:27
Thanks @Nick S..unfortunately that didn't work, it's still oriented to the left. – toekneeoeeo Mar 18 '22 at 20:28

How to center an iframe code for webpage?

1 Answers1