Làm cách nào để căn giữa một iframe theo chiều ngang?

234

Xem xét ví dụ sau: ( bản demo trực tiếp )

HTML:

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

CSS:

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

Kết quả:

nhập mô tả hình ảnh ở đây

Tại sao iframekhông được liên kết tập trung như div? Làm thế nào tôi có thể tập trung vào nó?

— Misha Moroshko
nguồn

6

Tại sao không gói div cho iframe này?

— Giberno

384

Thêm vào display:block;css iframe của bạn.

— Lô hội
nguồn

28

Cảm ơn! Tôi nên đoán rằng một inline framelà một yếu tố nội tuyến :)

— Misha Moroshko

33

Vì vậy, đó là những gì "i" là viết tắt của.

— Aayush

11

Vì vậy, luân phiên, bạn có thể cung cấp cho các text-align: centerquy tắc, đúng không?

— KOVIKO

1

có thêm văn bản-align: centre vào container cũng sẽ hoạt động

— chrisweb

9

Tôi thấy tôi cũng phải thêmmargin: auto;

— MarkyDD

45

cách tốt nhất và đơn giản hơn để tập trung vào iframe trên trang web của bạn là:

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

trong đó chiều rộng và chiều cao sẽ là kích thước của iframe của bạn trong trang html của bạn.

— xe đạp
nguồn

1

Tôi nghĩ rằng các alignthuộc tính đã được phản đối? Tại sao OP nên sử dụng phương pháp này thay vì sử dụng CSS - lợi thế là gì?

— andrewsi

4

style="text-align:center"không bị phản đối và sẽ làm công việc tương tự

— Anthony

mặc dù nó đã được khấu hao, nhưng điều này hoạt động, trong khi mọi thứ khác thì không.

— dùng819490

Điều này hoạt động trong tệp HTML và do đó dễ dàng hơn cho những người mới như tôi bắt chước. Tôi mới làm nó năm 2017 nên không được khấu hao. Cảm ơn vì tiền hỗ trợ!

— 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;

}

— dữ liệu
nguồn

11

Nếu bạn đang đặt video vào iframe và bạn muốn bố cục của mình trôi chảy, bạn nên xem trang web này: Video Fluid Width

Tùy thuộc vào nguồn video và nếu bạn muốn các video cũ trở nên phản hồi, chiến thuật của bạn sẽ cần phải thay đổi.

Nếu đây là video đầu tiên của bạn, đây là một giải pháp đơn giản:

<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>

Mở rộng đoạn trích

Và thêm css này:

.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%;
}

Mở rộng đoạn trích

Tuyên bố miễn trừ trách nhiệm: không ai trong số này là mã của tôi, nhưng tôi đã kiểm tra nó và hài lòng với kết quả.

— Không
nguồn

Điều này là để làm cho video trong iframe phản hồi, hoạt động tốt, cảm ơn bạn!

— Ricardo

11

Mã đơn giản nhất để căn chỉnh phần tử iframe:

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

— Tushar Soni
nguồn

Xin vui lòng xem cách trả lời đầu tiên Câu hỏi này được trả lời trước, rõ ràng, bạn có thể thêm câu trả lời của mình vào đây. Nhưng bạn cần hiểu một số điểm trước khi trả lời. Đầu tiên, đừng thêm câu trả lời được thêm trước đó với cùng mã hoặc đề xuất. Thứ hai, không thêm câu trả lời quá phức tạp nếu người dùng đã hỏi rất cụ thể về vấn đề và những gì anh ta cần để giải quyết vấn đề này. Thứ ba, Bạn có thể thêm một bình luận nếu bạn muốn đề xuất bất cứ điều gì liên quan đến câu trả lời hoặc câu hỏi.

— ankit suthar

6

Bạn có thể đặt iframe bên trong một <div>

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

Nó hoạt động vì bây giờ nó nằm trong một phần tử khối.

— Sonal Khunt
nguồn

3

Theo http://www.w3schools.com/css/css_align.asp , đặt lề trái và phải thành tự động chỉ định rằng họ nên chia lề có sẵn bằng nhau. Kết quả là một yếu tố trung tâm:

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

— bánh mì
nguồn

1

Chỉ khi phần tử cha có kiểu căn chỉnh văn bản được đặt thành chính giữa.

— parvus

3

Bạn co thể thử

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

Tôi hy vọng nó hữu ích cho bạn

liên kết

— Kael
nguồn

1

Trong trường hợp của tôi, giải pháp là trên lớp iframe thêm:

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

— Nezir
nguồn

0

Ở đây tôi đã đặt đoạn trích cho tất cả các bạn đang đau khổ để tạo iframe hoặc hình ảnh ở giữa màn hình theo chiều ngang. Hãy cho tôi THUMBS LÊN BẦU nếu bạn thích.👍⯅.

style> img & iframe> đây là tên thẻ của bạn để thay đổi nếu bạn muốn bất kỳ thẻ nào khác ở giữa

<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>

Mở rộng đoạn trích

— Thần chú Patel
nguồn