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

Question

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

HTML:

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

CSS:

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

Результат:

Почему iframe не расположен по центру, как div?Как я мог выровнять его по центру?

Answer 1

Добавьте display:block; к вашему iframe css.

Answer 2

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

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

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

Answer 3

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;

}

Answer 4

Если вы помещаете видео в 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%;
}

Отказ от ответственности: ни один из них не является моим кодом, но я проверил его и был доволен результатами.

Answer 5

Самый простой код для выравнивания элемента iframe:

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

Answer 6

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

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

. Он работает, потому что теперь он находится внутри блочного элемента.

Answer 7

Вы можете попробовать

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

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

ссылка

Answer 8

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

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