iframe 가운데 정렬 방법

iframe 가운데 정렬 방법

 

iframe 테스트를 위해 iframe으로 구성된 구글 지도 url을 가져왔습니다. 

내 html 화면에서 바로 구글 지도를 볼 수 있는 url 입니다.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3758.042766110948!2d-155.98706602480033!3d19.625469334493115!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x79540f1b1c20abf5%3A0xb9e9d13500af89e2!2z7YG065-9IOyciOuNpCDsvZTrgpgg7ZWY7JmA7J207JWIIOumrOyhsO2KuA!5e0!3m2!1sko!2skr!4v1704290982070!5m2!1sko!2skr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

 

위 url을 아무설정하지 않고 가져오면 왼쪽 정렬이 되네요 ㅠㅠ

 

<p align="middle"></p>

아래 코드 같이 p 태그에 align 옵션을 middle로 설정하면 가운데 정렬이 되네요

<p align="middle"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3758.042766110948!2d-155.98706602480033!3d19.625469334493115!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x79540f1b1c20abf5%3A0xb9e9d13500af89e2!2z7YG065-9IOyciOuNpCDsvZTrgpgg7ZWY7JmA7J207JWIIOumrOyhsO2KuA!5e0!3m2!1sko!2skr!4v1704290982070!5m2!1sko!2skr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe></p>

 

다행히 ㅋ 가운데 정렬이 됩니다.

 

 

아래 영역을 통해 코드 펜위에도 올려두었어요 ! 

See the Pen iframe 가운데 정렬 by hyunho (@momalcy) on CodePen.