Question

我在尝试集中外部脚本时遇到了很多麻烦，我希望SO可以帮助我。我正在设计一个页面来使用谷歌小部件，该小部件使用谷歌地图来指示办公室。这是我的代码：

<asp:Content ID="Content1" ContentPlaceHolderID="page_content" runat="server">
<div class="centered">

<span class="header_large_bold">Directions to our office:</span><br /><br />

<span class="header_bold">Please type your address in the top bar and click "Go".</span><br />

<script src="[link to the widget here]"</script>

</div>
</asp:Content>

这是它的CSS：

.centered {
width: 100%;
margin: 0 auto;
text-align: center;
}

实际上，文本居中完全正确，但是来自左侧的小部件是左对齐的。我可以使用标签解决这个问题，但我尽量避免使用它。知道我做错了吗？

Answer 1

您可以在div中插入标记

<div id="parent">
    <script src='...'></script>
</div>

然后将div放在中心..

#parent {
    width: 30%;
    margin: 0 auto;
}

但可能取决于脚本内容

Answer 2

轻松将代码置于

之间

<div align=center>

和

</div>

：）

Answer 3

用户fa7d0有确切的解决方案，但初学者可能有点不清楚：

步骤1 - 使用带有＆＃34;父级＆＃34;的div用于封装脚本的ID，如下所示：

<div id="parent">
<script src='...'></script>
</div>

第2步 - 转到代码的顶部，可能在您定义标题信息的区域内，并在样式部分放置定义：

<style>
#parent {
width: 30%;
margin: 0 auto;
}
</style>

我觉得将所有div样式的东西放在一个区域，将所有p样式的东西放在一个区域等等是有帮助的。

CSS - 如何将<script>的输出居中？</script>

3 个答案: