iframe을 가로로 가운데에 배치하는 방법은 무엇입니까?

234

다음 예제를 고려하십시오 : ( live demo )

HTML :

<div>div</div>
<iframe></iframe>

CSS :

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

결과:

여기에 이미지 설명을 입력하십시오

왜 iframe중앙 집중식으로 정렬되지 div않습니까? 어떻게 중앙에 정렬 할 수 있습니까?

— 미샤 모로 시코
소스

6

왜이 iframe의 div를 포장하지 않습니까?

— Giberno

384

display:block;iframe CSS에 추가 하십시오.

— 알로 치
소스

28

감사! 나는 inline frame인라인 요소 라고 짐작해야했다 :)

— Misha Moroshko

34

이것이 바로 "i"의 약자입니다.

— Aayush

11

따라서 컨테이너에 text-align: center규칙을 부여 할 수 있습니까?

— KOVIKO

1

예 텍스트 정렬 : 센터에 컨테이너를 추가해도 작동합니다.

— chrisweb

9

나도 추가해야한다는 것을 알았다margin: auto;

— MarkyDD

45

웹 페이지에서 iframe을 중앙에 배치하는 가장 좋은 방법은 다음과 같습니다.

<p align="center"><iframe src="http://www.google.com/" width=500 height="500"></iframe></p>

너비와 높이는 HTML 페이지에서 iframe의 크기가됩니다.

— 페드로
소스

1

align속성이 더 이상 사용되지 않는다고 생각 했습니까? OP가 CSS를 사용하는 대신이 방법을 사용해야하는 이유는 무엇입니까?

— andrewsi

4

style="text-align:center"더 이상 사용되지 않으며 동일한 작업을 수행합니다.

— Anthony

감가 상각되었지만이 방법은 작동하지만 다른 모든 것은 그렇지 않습니다.

— user819490

이것은 HTML 파일에서 작동하므로 나와 같은 초보자가 암시하는 것이 더 쉽습니다. 2017 년에 방금 했으므로 감가 상각해서는 안됩니다. 팁 고마워!

— Renel Chesak

20

HTML :

<div id="all">
    <div class="sub">div</div>
    <iframe>ss</iframe>
</div>

CSS :

#all{
    width:100%;
    float:left;
    text-align:center;
}
div.sub, iframe {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background-color: #777;

}

— mgraph
소스

11

비디오를 iframe에 넣고 레이아웃을 유동적으로 만들고 싶다면 다음 웹 페이지를보십시오. 유체 폭 비디오

비디오 소스에 따라 오래된 비디오가 반응하게하려면 전술을 변경해야합니다.

이것이 첫 번째 비디오 인 경우 간단한 해결책은 다음과 같습니다.

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

스 니펫 확장

그리고이 CSS를 추가하십시오 :

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

스 니펫 확장

면책 조항 : 이것 중 어느 것도 내 코드가 아니지만 테스트 한 결과에 만족했습니다.

— 놀
소스

이것은 iframe의 동영상을 반응 형으로 만들고 잘 작동하는 것입니다. 감사합니다!

— Ricardo

11

iframe 요소를 정렬하는 가장 간단한 코드 :

<div align="center"><iframe width="560" height="315" src="www.youtube.com" frameborder="1px"></iframe></div>

— 투 샤르 소니
소스

이 첫 번째 답변 방법을 참조하십시오.이 질문은 이전에 답변되었으므로 여기서 답변을 추가 할 수 있습니다. 그러나 응답하기 전에 몇 가지 사항을 이해해야합니다. 먼저 이전에 동일한 코드 또는 제안으로 추가 된 답변을 추가하지 마십시오. 둘째, 사용자가 문제와 문제 해결에 대해 매우 구체적으로 요구 한 경우 지나치게 복잡한 답변을 추가하지 마십시오. 셋째, 답변이나 질문에 대해 제안하고 싶은 경우 의견을 추가 할 수 있습니다.

— ankit suthar

6

내부에 iframe을 넣을 수 있습니다 <div>

<div>
    <iframe></iframe>
</div>

이제 블록 요소 안에 있기 때문에 작동합니다.

— 소날 쿤트
소스

3

http://www.w3schools.com/css/css_align.asp 에 따르면 왼쪽 및 오른쪽 여백을 자동으로 설정하면 사용 가능한 여백을 균등하게 분할하도록 지정합니다. 결과는 중심 요소입니다.

margin-left: auto;margin-right: auto;

— 부사 삭
소스

1

부모 요소에 스타일 텍스트 정렬이 가운데로 설정된 경우에만 해당됩니다.

— parvus

3

당신은 시도 할 수 있습니다

<h3 style="text-align:center;"><iframe src=""></iframe></h3>

나는 그것이 당신에게 유용하기를 바랍니다

링크

— 케일
소스

1

필자의 경우 솔루션은 iframe 클래스 추가에있었습니다.

    display: block;
    margin-right: auto;
    margin-left: auto;

— 네 지르
소스

0

여기에 iframe이나 이미지를 화면 중앙에 가로로 놓는 데 어려움을 겪는 모든 분들을 위해 스 니펫을 넣었습니다. 원한다면 THUMBS UP VOTE를주세요.

style> img & iframe> 태그 이름이므로 다른 태그를 중앙에 두려면 변경하십시오

<html >
 <head> 
            <style type=text/css>
            div{}
            img{
                 margin: 0 auto;
	         display:block;
         	}
	 iframe{	
		margin: 0 auto;
		display:block;
		}
				
            </style>
</head>
 <body >
           
			<iframe src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" width="320" height="180" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 
			
			<img src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg" width="320" height="180"  />
            </body> 
            </html>

스 니펫 확장

— 만탄 파텔
소스