Як централізувати рамку горизонтально?

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?

— Giberno

384

Додайте display:block;до свого iframe css.

— Alohci
джерело

28

Дякую! Я повинен був здогадатися, що елемент inline frameє вбудованим елементом :)

— антура Міша Морошко

34

Так ось і означає «я».

— Аяуш

11

Отже, по черзі, ви можете дати контейнеру text-align: centerправило, правильно?

— КОВІКО

1

так, додавання вирівнювання тексту: центр контейнера також буде працювати

— chrisweb

9

Я виявив, що мені теж додатиmargin: auto;

— MarkyDD

45

Найкращий спосіб і простіше в центрі iframe на вашій веб-сторінці:

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

де ширина та висота будуть розмірами вашого iframe на вашій html-сторінці.

— педро
джерело

1

Я думав, що alignатрибут застарілий? Чому ОП повинна використовувати такий підхід, а не використовувати CSS - у чому перевага?

— andrewsi

4

style="text-align:center"не застаріла і зробила б ту саму роботу

— Ентоні

незважаючи на те, що це знецінено, це працює, тоді як все інше - ні.

— user819490

Це працює у файлі HTML, і таким чином легше для нових користувачів, як я, розповсюджуватися. Я щойно це зробив у 2017 році, тому його не слід знецінювати. Дякую за пораду!

— Ренель Чесак

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 , і ви хочете , щоб ваш макет бути текучим, ви повинні дивитися на цій сторінці: Fluid Ширина відео

Залежно від джерела відео та якщо ви хочете, щоб старі відео стали чуйними, вашу тактику потрібно буде змінити.

Якщо це ваше перше відео, ось просте рішення:

<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 чуйним, добре працює, дякую!

— Рікардо

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>

Він працює, тому що зараз знаходиться всередині елемента блоку.

— Sonal Khunt
джерело

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

Тут я поставив фрагмент для всіх вас, хто страждає робити рамку або зображення в центрі екрана по горизонталі. Дайте мені великі пальці, якщо хочете.👍⯅.

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>

Розгорніть фрагмент

— Мантан Патель
джерело