2

我正在练习使网页响应移动屏幕分辨率。我成功的宽度。我如何管理这个高度？我的包装器继续保持在顶部而不是垂直对齐。

我已经看到了很多关于这个问题的问题，但还没有在我的 css 上找到指定的解决方案。希望有人可以帮助我。

HTML

<body>
  <div class="wrapper">
    <div class="header">
    </div>
    <div class="content">
      <a href="http://test"><div id="topleftbox"></div></a>
      <a href="http://test"><div id="toprightbox"></div></a>
      <a href="http://test"><div id="bottomleftbox"></div></a>
      <a href="http://test"><div id="bottomrightbox"></div></a>
    </div>
  </div>

CSS

    body {

    }

    .wrapper {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    }

    .header {
    min-width: 50%;
    height: 20px;
    }

    .content {
    min-width: 500px;
    width: 40%;
    height: auto;
    margin: 0 auto;
    }

    #topleftbox {
    background: url(..);
    background-repeat: no-repeat;
    width: 229px;
    height: 228px;
    float: left;
    }

    #toprightbox {
    background: url(...);
    background-repeat: no-repeat;
    width: 229px;
    height: 228px;
    float: right;
    }

etc.
4

4 回答 4

3

要使用display:table-cell;，您需要模拟完整的表结构。幸运的是，您不必添加任何额外的标记，因为您可以针对htmlandbody标签设置样式：

html{display:table;width:100%;height:100%;}
body{display:table-row;}
.wrapper{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

注意：这垂直居中.wrapper的内容，而不是 div 本身。

于 2013-02-26T22:49:02.337 回答
0

与水平居中不同，从来没有一种 CSS 方式来垂直居中。唯一的方法是使用 javascript 获取“window.innerHeight”，然后将 HTML 元素（包装器）的高度添加到其中并将总数分成两半。并将其设置为新的顶部位置。

此外，您的“包装器”的高度为 100%，这应该意味着它填充了整个屏幕高度。如果它与屏幕高度相同，它将不会居中。它的宽度也为 100%，我怀疑“margin: 0 auto”是否在做任何事情。

于 2013-02-26T22:46:26.537 回答
0

CSS 中的垂直对齐有几个选项：

1.通过表格单元格。（这在 IE8+ 中确实有效）

{
    display:table-cell;
    vertical-align:middle;
}

2. line-height = 元素的高度（如果你有超过一行的文字，我想这看起来很时髦）

{
    height:10em; 
    line-height:10em;
}

您可以找到更多选择，但我相信display: table现在应该是您最好的选择。

http://www.zann-marketing.com/.../vertically-centering-text-using-css.html https://stackoverflow.com/questions/2939914/

于 2013-02-26T22:47:12.823 回答
0

您可以使用display:table呈现您的 DIV，如表格和表格单元格。

更多信息：http ://www.jakpsatweb.cz/css/css-vertical-center-solution.html

于 2013-02-26T22:40:20.133 回答