Как центрировать фрейм по горизонтали?

234

Рассмотрим следующий пример: ( живая демонстрация )

HTML:

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

CSS:

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

Результат:

введите описание изображения здесь

Почему iframeцентрально не выровнен как div? Как я мог централизованно выровнять это?

— Миша Морошко
источник

6

почему бы не обернуть div для этого iframe?

— Гиберно

384

Добавьте display:block;в свой iframe css.

— Alohci
источник

28

Спасибо! Я должен был догадаться, что это inline frameвстроенный элемент :)

— Миша Морошко

34

Вот что означает «я».

— Ааюш

11

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

— КОВИКО,

1

да добавление text-align: центр к контейнеру тоже будет работать

— chrisweb

9

Я также обнаружил, что должен был добавитьmargin: auto;

— MarkyDD

45

Лучший и простой способ центрировать фрейм на вашей веб-странице:

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

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

— Педру
источник

1

Я думал, что alignатрибут устарел? Почему OP должен использовать этот подход вместо CSS - в чем преимущество?

— Андрюси

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 и хотите, чтобы ваш макет был плавным, вы должны посмотреть эту веб-страницу: Видео ширины жидкости

В зависимости от источника видео и от того, хотите ли вы, чтобы старые видео стали отзывчивыми, вам нужно будет изменить свою тактику.

Если это ваше первое видео, вот простое решение:

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

— Тушар Сони
источник

Пожалуйста, ознакомьтесь с первой инструкцией. На этот вопрос уже дан ответ, очевидно, вы можете добавить свой ответ здесь. Но вам нужно понять некоторые моменты, прежде чем ответить. Во-первых, не добавляйте ответ, который ранее был добавлен с тем же кодом или предложением. Во-вторых, не добавляйте слишком сложный ответ, если пользователь задал очень конкретный вопрос о проблеме и что ему нужно для ее решения. В-третьих, вы можете добавить комментарий, если хотите что-то предложить относительно ответа или вопроса.

— Анкит Сутар

6

Вы можете поместить iframe внутрь <div>

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

Это работает, потому что теперь оно внутри блочного элемента.

— Сонал Хунт
источник

3

Согласно http://www.w3schools.com/css/css_align.asp , установка для левого и правого полей значения auto указывает на то, что они должны равномерно разделить доступное поле. Результатом является центрированный элемент:

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

— Boussac
источник

1

Только если родительский элемент имеет стиль text-align установлен в центр.

— Парвус

3

Можешь попробовать

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

Я надеюсь, что это полезно для вас

ссылка на сайт

— Кель
источник

1

В моем случае решение было на добавление класса iframe:

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

— Незир
источник

0

Здесь я поместил фрагмент кода для всех вас, кто страдает от того, чтобы сделать iframe или изображение в центре экрана горизонтально. Дайте мне голосов, если хотите.

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>

Развернуть фрагмент

— Мантан Патель
источник