web-dev-qa-db-ja.com

iframeを中央に配置するにはどうすればよいですか？

私はこのページのいくつかのiframeを中央に配置しようとしています リンク 。しかし、私が見たすべての例は、私が試したものであり、機能しません。中央に配置されていない視差フローティングdivがはっきりとわかります。下部では、htmlページのiframeが右側​​にフローティングされており、中央に配置されていません。

どんな助けでも大歓迎です。

htmlcssiframecentering
8
Calle

http://codepen.io/mlegg10/pen/zqLdJy cssのパディングを変更します-ニーズに合わせて上下を変更します

/* Flexible iFrame */

.Flexible-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<!-- Responsive iFrame -->
<div class="flexible-container">
  <object width="100%" data=""https://drive.google.com/file/d/0BxrMaW3xINrsR3h2cWx0OUlwRms/preview"&amp;toolbar=0&amp;navpanes=0" type="application/pdf">
      <embed width="100%" type="application/pdf" src="https://drive.google.com/file/d/0BxrMaW3xINrsR3h2cWx0OUlwRms/preview"?scrollbar=0&amp;toolbar=0&amp;navpanes=0">
    </object>
</div>
5
mlegg

display:block + margin:auto;

iframe {
  display:block;
  margin:auto;
}
<iframe></iframe>
5
G-Cyrillus