Question

我正在尝试将div id“tile”中包含的所有内容移动到Web浏览器的中心。默认情况下，CSS未定义，它显示在浏览器的左侧。我想要做的是当点击按钮“移动”时，使用javascript将整个div移动到中心。

html直接显示在下面，并且尝试（但不能正常）的javascript显示在下面。

HTML

<div id="tile">
    <div class="menu">
        <ul>
            <li><a href="#" title="" id="tab4"> Vis </a></li>
        </ul>
    </div>
    <div id="tabcontent4">Some generic content</div>    
        <button onclick="move();" type="button">Move</button>
    </div>
</div>

的javascript

document.getElementsById("tile").style.align='center';

编辑：如何将div移动到特定位置？

Answer 1

CSS中没有“align”属性。最接近的是text-align，但您可能希望使用CSS声明margin: 0 auto，它会将整个<div>移动到页面的中心。所以你想要：

document.getElementById("tile").style.margin="0 auto";

确保tile具有指定的宽度。

Answer 2

你可以用CSS做到这一点：

<div id="tile" style='margin:0 auto;width:300px'>
    ...
</div>

或者，将其放在容器中，并将其内容集中在其中：

<div id='container' style='text-align:center'>
  <div id='tile' style='width:300px'>
    ...
  </div>
</div>

当然，首选非内联样式。

好的用户名，BTW。

//编辑

使用javascript将div放在特定位置：

document.getElementById('tile').style.position = "absolute";
document.getElementById('tile').style.left = "100px";
document.getElementById('tile').style.top = "100px";

必须定义position，通常为absolute或relative。

再次，这可以 - 通常应该 - 使用CSS完成：

#tile { position:absolute; left:100px; top:100px }

如何使用Javascript移动整组对象

2 个答案: