让 iframe 在网页上对齐

Question

我有两个按钮设置为使用 JS 连接到我网站内部的其他页面的 onclick。这些连接到的页面只运行显示在表格中的 php。然后这个 tanle 数据显示在 JS 中设置的 iframe 中。我的问题是我无法让 iframe 使用 css 或通过我的 html 中的样式对齐。我可以使用 css 移动它，但我无法让它直接在按钮下方或页面中心对齐。

<div class="center">

<button onclick="myFunction1()">Illustrators</button>

<button onclick="myFunction2()">Tech Writers</button>

</div>

<script>
var iframeExists = false;

 function myFunction1() {
 var x
 if (!iframeExists) {
  x = document.createElement("IFRAME");
  iframeExists = true;
 } else {
  x = document.getElementsByTagName("IFRAME")[0];
 }
 x.setAttribute ("src", "http://www.oldgamer60.com/Project/Illustrators.php");
 document.body.appendChild(x);
 }

function myFunction2() {
var x;
if (!iframeExists) {
  x = document.createElement("IFRAME");
  iframeExists = true;
} else {
  x = document.getElementsByTagName("IFRAME")[0];
}
x.setAttribute("src", "http://www.oldgamer60.com/Project/TechWriters.php");
document.body.appendChild(x);
}
</script>

CSS

iframe {
border: 0px solid #ffffff;
 margin: auto;
 width: 300px;
 Height: 200px;} 

Answer 1

试试这个做一些改变，比如 HTML

<button onclick="myFunction1()">Illustrators</button>

<button onclick="myFunction2()">Tech Writers</button>

<div id="myiframe-div">
</div> 
</div>

而不是

document.body.appendChild(x);

使用

document.getElementById("myiframe-div").appendChild(x);

Answer 2

如果您希望 iframe 和按钮居中对齐，请使用以下 HTML 和 CSS（以及您已经很好的 JavaScript）：

<div class="center">
 <p>
  <button onclick="myFunction1()">Illustrators</button>
  <button onclick="myFunction2()">Tech Writers</button>
 </p>
</div>

iframe {display: block; /*new*/
        margin: auto;
        border: none; /*revised*/
        width: 300px;
        height: 200px;}
div.center p {text-align: center;} /*new*/