To center align an iframe
using html
and css
, you can set text-align
to center
or can use flex
properties. Otherwise you can also set margin auto
to the parent DIV
.
Code Example –
1. Using text-align: center
in css –
<div class="iframe-parent"> <iframe src="https://akashmittal.com"></iframe> </div> <style> .iframe-parent { text-align: center; } </style>
2. Using text-align: center
as inline style –
<div style="text-align:center;"> <iframe src="https://akashmittal.com"></iframe> </div>
3. Using flex
properties in css –
<div class="iframe-parent"> <iframe src="https://akashmittal.com"></iframe> </div> <style> .iframe-parent { display: flex; align-items: center; justify-content: center; } </style>
4. Using margin: auto
in parent div
<div class="iframe-parent"> <iframe src="https://akashmittal.com"></iframe> </div> <style> .iframe-parent { width: 500px; margin: 0 auto; } </style>