HTML 센터 iFrame

이 게시물에서는 HTML 문서에서 iFrame을 중앙에 배치하는 여러 가지 방법을 살펴봅니다. iframe 요소는 인라인 프레임을 정의합니다.

인라인 프레임을 사용하여 다른 문서를 현재 HTML 문서에 삽입합니다.

HTML에서 중앙 iFrame

1. 디스플레이 : 블록 - 요소의 렌더링 상자 유형(표시 동작)은 디스플레이 속성으로 지정됩니다. 디스플레이: 블록은 요소의 단락 요소와 같은 블록 요소를 표시합니다. 전체 너비를 채우고 새 줄에서 시작합니다.
2. text-align : center - block 요소의 내부 내용은 text-align CSS 속성을 사용하여 정렬됩니다. 이들은 text-align: left의 기존 값이며 기본값입니다. 콘텐츠의 왼쪽이 정렬됩니다.

이전 개념을 더 잘 이해하려면 다음 예제를 고려하십시오.

<div>div</div>
<iframe class="iFrame" src="data:,iframe"></iframe>

<hr>

<div id="all">
    <div>div</div>
    <iframe src="data:,iframe"></iframe>
</div>

div, iframe {
    width: 150px;
    height: 50px;
    margin: 0 auto;
    background-color: #777;
}

.iFrame {
    display: block;
    border-style: none;
}

#all{
    width: 150px;
    text-align: center;
}

이전 예제에서는 iframe을 사용하여 두 개의 div를 정의했습니다. display: block;으로 iframe을 정의했습니다. 첫 번째 div의 속성을 지정한 다음 text-align: center;를 적용했습니다. 상위 div로 묶은 후 두 번째 iframe에.