0

我正在开发一个非常基本的网站模板，左上角有一个固定的标题，左下角和右下角有一个固定的底线。

中间的内容应该是居中的，我只是无法弄清楚我做错了什么。

height: 100%问题 1.) 如果我删除css 属性，为什么垂直居中不起作用？

问题 2.) 当height: 100%在 html 标签上声明时，为什么站点大于 100% 并超出浏览器窗口？

问题 3.) 为什么bottom-left显示正确，但不正确bottom-right？

问题 4.) 如果 with 设置为 100% 并且文本向右对齐，文本不应该从右浏览器框架开始并延伸到左侧吗？为什么要扩展浏览器窗口？

非常感谢您的帮助。代码在下面可见

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

html {
    height:100%;
}

body {
    height: 100%;
    margin-left: 20px;‚
}

.title {
    position: absolute;
    top: 20px;
    font-family: serif;
    font-size: 20px;
    text-align: left;
}

/* Center Text Section */

.area {
  width: 100%;
  height: 100%;
  position: relative;
}

.middlespace {
  position: absolute;
  left: 50%;
  top: 50%;
  display: table;
}

.middlespace p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.exhibitionindex {
    text-align: center;
    width: 500px;
    margin-right: auto;
    margin-left: auto;
}

.bottom-left {

    position: absolute;
    bottom: 15px;
    text-align: left;
}

.bottom-right {
    position: absolute;
    bottom: 15px;
    text-align: right;
}

.exhibitiontitle {
    color: #d4d4d4;
    font-style: italic;
    font-family: sans-serif;
    font-size: 10px;
    text-align: center;
}

.bold {
    font-family: serif;
}


.about {
    font-size: 11px;
}

.contact {
    font-size: 11px;
}

.openinghours {
    font-style: italic;
    color: #8e8e8e;
    font-size: 11px;
}

</style>

<title>Website Title</title>

</head>
<body>
    <div class="title">Logo / Title Text</div>

    <div class="area">
        <div class="middlespace">
            <p>27. April 2012</p>
        </div>
    </div>
    <div class="bottom-left">
        <span class="about"><span class="bold">XYZ</span> is a project by Person One, Person Two, Person Three&nbsp;&nbsp;&#124;&nbsp;</span>
        <span class="contact">Website Information &mdash; <a href="mailto:info@info.com">info@info.com</a></span>
    </div>
    <div class="bottom-right"><span class="openinghours">Opening Hours Information</span></div>
</body>
</html>
4

1 回答 1

3

问题 1.) 如果我删除 height: 100% css 属性，为什么垂直居中不起作用？

默认情况下，htmlandbody元素会扩展高度以适应其内容。因此，在不设置高度的情况下，您的高度html仅与包含样式所需的内容一样高。此外，绝对定位元素不会影响其父元素的大小。如果不将高度设置为 100%，area也不会是窗口的完整高度，因此您将在页面顶部的一个小条中垂直居中。

问题 2.) 当在 html 标签上声明 height: 100% 时，为什么站点大于 100% 并超出浏览器窗口？

仅此一项不会超出页面边界。但是，如果您为 100% 元素添加边距、边框或类似属性，则这些属性会添加到100% 之外，从而使您的元素延伸到窗口边缘之外。

问题 3.) 为什么左下角显示正确，但右下角显示不正确？

你绝对定位这些元素。Div 元素通常是父元素宽度的 100%。但是，当您绝对定位它们时，它们的宽度会缩小以适应内容。在您的情况下，您尝试text-align在div默认情况下左对齐的范围内。因为div只有文本那么大，所以左对齐、右对齐和居中对齐看起来都一样。因为您已经在绝对定位divs，所以只需使用绝对定位来对齐它们：

.bottom-left {
    position: absolute;
    bottom: 15px;
    left: 15px;
}
.bottom-right {
    position: absolute;
    bottom: 15px;
    right: 15px;
}
于 2012-05-15T17:47:43.157 回答