对齐图形标题下方的按钮

Question

我有一个位于页面中心的标题图形，在中心它会根据窗口大小移动，但是我想在它下面放置一些按钮，这些按钮锚定在标题的左侧，以便当标题移动时，按钮总是从标题图形的左下角开始显示。

这可能吗？

这是我在 html 中的内容：

      <div id="header">
            <p class="centeredImage"><img src="supt_files/main_back.jpg" width="804" height="116" border="0" alt=""></p>
        <div id="centretext">
            <a href="#How"><button style="background-color: SlateGrey" type = "button" onmouseover="style.backgroundColor='DarkGoldenRod';" onmouseout="style.backgroundColor='SlateGrey'"> How Do I... </a></button>
            <a href="#Servers"><button style="background-color: SlateGrey" type = "button" onmouseover="style.backgroundColor='DarkGoldenRod';" onmouseout="style.backgroundColor='SlateGrey'"> Servers </a></button>
            <a href="#Sign"><button style="background-color: SlateGrey" type = "button" onmouseover="style.backgroundColor='DarkGoldenRod';" onmouseout="style.backgroundColor='SlateGrey'"> Significant services </a></button>
        </div>
        </div> <!-- Header -->

在css中：

#header { 宽度：100%； 高度：157px； 位置：相对； 顶部：0px； 背景色：SlateGrey； }

#centretext { 文本对齐：居中； }

Answer 1

我会用 CSS 来做到这一点。您可以创建一个以定义的宽度为中心的类（div 标签内的任何内容都将对齐），或者将其放入背景定义中，以便所有内容对齐。

带 DIV 标签： 按以下方式更改 HTML：

<div class="anchored">
   images, etc (whatever you put here)
</div>

然后将以下内容添加到您的 CSS 文档中：

.anchored{
   display:block;
   margin-left:auto;
   margin-right:auto;
   width:<whatever your banner/desired width is>;
}

这意味着 div 标签中的任何内容都将对齐。

整个文档： HTML 可以保持原样，并将以下内容添加到您的 CSS 文档的 body 下：

body{
   width:<whatever your banner/desired width is>;
   margin:auto auto;
}

这将使页面上的所有内容——文本、图片等——都适合指定的宽度，就像这个页面一样。

希望对你有帮助！