html - 对齐图形标题下方的按钮

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 { width: 100%; height: 157px; position: relative; top: 0px; background-color: SlateGrey; }

#centretext { text-align: center; }

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 可以保持原样，并在 body 下的 CSS 文档中添加以下内容:

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

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

希望对您有所帮助!