如何在列表项中居中 iframe答案

【问题标题】：How to center an iframe inside list item如何在列表项中居中 iframe
【发布时间】：2016-07-27 16:22:05
【问题描述】：

我正在尝试将 iframe 居中，但它似乎不起作用。

HTML 代码：

<ul class ="xslides" id=xslide1">
  <li><iframe width="750px" height="500px" frameborder="0" src="test/embed" marginwidth="0" marginheight="0" scrolling="no" style="border: none; max-width:100%; max-height:100vh" allowfullscreen webkitallowfullscreen  mozallowfullscreen msallowfullscreen></iframe>
  </li>
</ul>

CSS：

.xslides ul li {
  -webkit-backface-visibility: hidden;
   width: 100%;
   margin-left: auto;
  margin-right: auto;

  }

【问题讨论】：

<ul class ="xslides" id=xslide1"> 应该是 <ul class ="xslides" id="xslide1"> 。不要使用width 和height 属性，而是使用CSS。
我已经编辑了 ID 并删除了宽度和高度..似乎 iframe 显示的尺寸很小..
我已将 src 链接放在框架标签内，图像似乎链接到特定的 url
我不确定你想在这里完成什么。你能详细说明一下吗？

标签： html css iframe center

【解决方案1】：

如果我没记错的话，列表项是一个内联元素。

.xslides ul li {
   -webkit-backface-visibility: hidden;
   width: 100%;
   display: block;

 }
 iframe {
   outline: 1px solid black;
   display: block;
   margin: 0 auto;
   width: 750px;
   height: 500px;
 }

你可以试试这个，

https://jsfiddle.net/fpc9g3mx/

顺便说一句，您可能还想从.xslides 中删除list-style。

【讨论】：

我已经尝试过你所说的但它不起作用，你显示了 CSS 但 html 代码似乎没问题？..除非我将宽度和高度放在 html 代码上它适用于大小但不是居中似乎但无法读取 css
你会画一个简单的图像来详细说明你想要什么吗？并通过将图像放入其中来更新问题。
唯一的问题是我无法将其居中..对于图像它可以工作但 iframe 不能，检查 iframe css
要放到网页上的图片保存在另一个网址中，但不另存为图片