Попытка центрировать элемент iframe. Пробовал решения в других вопросах, но ничего не помогло

Я попытался поместить его в div со стилем = "text-align: center;", попытался сделать display: block;, попробовал align = "center". Ничто из того, что я нашел, не сработало. Ниже приведен код. Я мог бы также включить все, что я пробовал.

<div align = "center" style = "text-align: center;">
    <script src = "https://donorbox.org/widget.js" paypalExpress = "false"></script><iframe allowpaymentrequest = "" frameborder = "0" height = "900px" name = "donorbox" scrolling = "no" seamless = "seamless" src = "https://donorbox.org/embed/ondecc?default_interval=o" style = "min-width: 310px; max-height:none!important margin: 0 auto; display: block;" width = "100%"></iframe>
</div>

Вот оригинал

<script src = "https://donorbox.org/widget.js" paypalExpress = "false"></script><iframe allowpaymentrequest = "" frameborder = "0" height = "900px" name = "donorbox" scrolling = "no" seamless = "seamless" src = "https://donorbox.org/embed/ondecc?default_interval=o" style = "min-width: 310px; max-height:none!important" width = "100%"></iframe>

Также обратите внимание, что я делаю это в Bootstrap.

html css iframe bootstrap-4

18.12.2020 17:40

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Раскрытие чувствительных данных

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

Разница между тегами Br и Wbr в HTML 5

В целом, оба тега <br> и <wbr> имеют свои уникальные цели и функциональные возможности, и их использование зависит от конкретных требований к дизайну...

HTML И VS CODE Для Веб-разработки

Прежде чем начать кодировать html в "VS CODE", мы должны сначала создать папку и назвать ее x.html, здесь я принимаю x как имя файла, который мы...

Как использовать WAI-ARIA

В моем текущем новом проекте почти все компоненты не учитывают веб-доступность. Моя нынешняя компания - это стартап, поэтому они не заботились о...

Статическая веб-страница, созданная с помощью CSS и HTML - до и не до.

Я потратил некоторое время на создание своего сайта-портфолио. Затем, гордясь собой, я разместил свой код на серверах amazon. Мне потребовалось время,...

223

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вот фиксированное решение, друг, вам просто нужно было добавить display : flex; и justify-content : center; к атрибуту style вашего div.

Кроме того, не рекомендуется делать встроенный css, вместо этого у вас всегда должен быть внешний css файл.

Вот ваше решение. Дайте мне знать, если это то, что вы хотели :)

<div align = "center" style = "width : 100%; display : flex; justify-content : center;">
    <script src = "https://donorbox.org/widget.js" paypalExpress = "false"></script><iframe allowpaymentrequest = "" frameborder = "0" height = "900px" name = "donorbox" scrolling = "no" seamless = "seamless" src = "https://donorbox.org/embed/ondecc?default_interval=o" style = "min-width: 310px; max-height:none!important; display: block; margin : 0 auto;"></iframe>
</div>

18.12.2020 17:51

Ширина iframe должна быть меньше 100%, иначе элемент займет всю доступную ширину своего родительского элемента.

div{
  text-align: center;
}

iframe{
   display:blok;
   margin: 0 auto;
   width: 310px; /* It should not be 100% */ 
   max-height:none!important
}

<div>
<script src = "https://donorbox.org/widget.js" paypalExpress = "false"></script><iframe allowpaymentrequest = "" frameborder = "0" height = "900px" name = "donorbox" scrolling = "no" seamless = "seamless" src = "https://donorbox.org/embed/ondecc?default_interval=o"width = "100%"></iframe>
</div>

18.12.2020 17:51

Другие вопросы по теме

Предотвратить изменение размера кнопки по количеству слов внутри кнопки

Должны ли привязки класса Vue 3 с переменными быть встроенными?

Привязка класса vue к переменной объекта

Div не заполняется даже при минимальной высоте: 100%;

Добавление <img> внутрь элемента flex приводит к тому, что элемент flex расширяется, несмотря на то, что изображение достаточно маленькое, чтобы поместиться внутри

Materialise Modal overlay не закрывается

Предотвращение роста элемента td для соответствия дочерним элементам

Как заставить навигационные вкладки прокручиваться горизонтально в bootstrap 3?

Ссылки в мобильном меню (<ul> <li a>) не работают при использовании события touchend вместо события click в JavaScript

Проблемы с загрузкой - размер строки карты не изменяется при добавлении полей

Попытка центрировать элемент iframe. Пробовал решения в других вопросах, но ничего не помогло

Ответы 2

Другие вопросы по теме

Похожие вопросы