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;       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;
}

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

我希望有所帮助！

对齐图形标题下方的按钮

1 个答案: