html - 样式栏中的文本绝对定位为 100%

Question

我的布局具有 100% 宽度的页眉栏和 100% 宽度的页脚，但内容居中且宽度仅为 800 像素。

我试图在窗口拉伸(stretch)时使文本 float 对齐到内容区域，但想不出最好的方法。

EXAMPLE

我已经尝试在标题 div 中进行绝对定位和相对定位，但是当窗口拉伸(stretch)时，我要么让文本 1 停留在同一位置，要么它在文本 1 栏中完全左对齐。

提前致谢

Answer 1

你可以试试this

您可以删除 width: 100% 作为它的 block 元素，它将占据整个宽度。

并在页眉和页脚中再添加一个 div，设置为 width: 800px 和 margin: 0 auto使内部内容居中。

HTML

<div class="container">

<header> <div class="cnt">Header Text</div> </header>

    <div class="content">
        Div content......
    </div>

<footer><div class="cnt">Footer Text</div> </footer>

</div>

CSS

.container{

    height:100%;
}
   header,footer{

    height:50px;
    border:1px solid red;
}
.cnt,
  .content{
    width:800px;
    height:100%;
    border:1px solid blue;
    margin: 0 auto;
}