Как центрировать iframe горизонтально?

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

HTML:

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

CSS

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

Результат:

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

Ответ 1

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

Ответ 2

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;

}

Ответ 3

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

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

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

Ответ 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>

Ответ 5

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

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

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

Ответ 6

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

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

Ответ 7

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

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