Блог

Главная - Вопросы по программированию - Возникли проблемы с центрированием моего iframe из-за моего

Возникли проблемы с центрированием моего iframe из-за моего

#iframe

#iframe

Вопрос:

 <style>
    #wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
    #frame { width: 800px; height: 520px; border: 1px solid black; }
    #frame {
        -ms-zoom: 0.5;
        -moz-transform: scale(0.5);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.5);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.5);
        -webkit-transform-origin: 0 0;
    }
</style>

<iframe id="frame" src="example.com" height="100%" width="100%"></iframe>

Выше приведен мой текущий HTML-код, работает нормально, но, похоже, я не могу центрировать его на странице, он просто находится слева. Я хочу сделать это без файла css, чтобы я мог легко использовать его в виджете, хотя я не уверен, что нужно изменить, чтобы заставить его двигаться. Заранее спасибо!

Ответ №1:

Есть много способов сделать это, вы можете сделать это, установив положение iFrame в абсолютное, а верхнее и левое — в 50%. Как показано ниже:

 <iframe id="frame" style="position: absolute; top: 50%; left: 50%;" src="example.com" height="100%" width="100%"></iframe>