Блог

Я работаю над разработкой простой веб-страницы для своего малого бизнеса и столкнулся с небольшой проблемой. У меня есть страница под названием «Найти нас», на которую посетители могут перейти и просмотреть два встроенных iframe из Google Maps, один из которых представляет собой вид карты, а другой — вид улицы. Я создал класс строк и столбцов в своем файле CSS, чтобы я мог устанавливать их рядом. Это работает, но мой вопрос в том, как мне заставить iframes центрироваться внутри их соответствующих строк divs? Я попытался установить text-align:center в строке и столбце безрезультатно, и когда я просматриваю страницу в Firefox, оказывается, что iframe на самом деле находится внутри пары divs, созданных во время выполнения, которые находятся внутри созданного мной столбца div (именно поэтому я предполагаю, что текст -выравнивание: изменение центра в столбце не повлияло). Я довольно много пробовал и немного новичок в HTML и CSS, поэтому буду признателен за любую помощь. Вот соответствующий код, который у меня есть:

HTML:

 <!-- Page Content -->
<div class="row">
    <div class="column">
        <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d820.109972365762!2d-82.9747956!3d34.6940833!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8858f48d9c0b5b95:0x9025d413ee9c3690!2sComputers Plus!5e0!3m2!1sen!2sus!4v1600897132491!5m2!1sen!2sus" width="600" height="450" frameborder="0" style="border:0;display:block;float:left;" allowfullscreen="" aria-hidden="false" tabindex="0" class="card"></iframe>
    </div>
    <div class="column">
        <iframe src="https://www.google.com/maps/embed?pb=!4v1600897261750!6m8!1m7!1s3ZaVoRt_4ZAZOf7ojip-rQ!2m2!1d34.69359001695453!2d-82.97439599257413!3f329.63553875594886!4f-3.155410164097759!5f1.6853925263716625" width="600" height="450" frameborder="0" style="border:0;display:block;float:left;" allowfullscreen="" aria-hidden="false" tabindex="0" class="card"></iframe>
    </div>
</div>
  

CSS:

 .column {
    text-align: center;
    float: left;
    width: 50%;
    padding: 10px;
}

.row::after {
    content: "";
    clear: both;
    display: table;
    text-align: center;
}

.card {
    box-shadow: 5px 5px 10px 5px rgba(0,0,0,0.2), 6px 6px 20px 5px rgba(0,0,0,0.19);
    background-color: white;
    margin-left: auto;
}
  

Код для iframes не изменился по сравнению с тем, что предоставили Карты Google. Любая помощь будет с благодарностью принята.

Вы можете исправить это, удалив float:left из style атрибута <iframe> элементов, который в настоящее время препятствует их центрированию.