0

在下面的文档中，是否可以将内部 div 水平居中，或者以其他方式使 V 和 H 的文本都在outer类 div 中居中？

一些限制（抱歉在开始时没有指定）： 1. 不应该指定固定宽度，否则解决方案是微不足道的；2. 没有 JavaScript，只有纯 CSS 和 HTML。

<!DOCTYPE html>
<html>
  <head>
    <title>the title</title>
    <style>

        div.outer {
            /* ? */
        }

        div.inner {
            display: table-cell;
            min-height: 100px;
            vertical-align: middle;
        }

    </style>
  </head>
  <body>
    <div class="outer">
        <div class="inner">
            <p>Vertically centered text. How to center it horizontally?</p>
        </div>
    <div>
  </body>
</html>
4

4 回答 4

3

试试这个：

.outer {
   display: table;
   width: 100%;
}
.inner {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

演示

它不使用 JavaScript，也不需要您修复width/ height/ line-height。

于 2012-09-29T09:55:20.443 回答
1

如果是单行文本，可以使用：

div.inner {
  line-height: 100px;
}

随着浏览器支持开始发挥作用，多行变得更加棘手。在 CSS 中按百分比填充可以工作，尽管我发现使用 jQuery 来检测 div.outer 大小然后创建填充是最可靠的方法。

$(document).ready(function() {
  var whitespace = $("div.outer").innerHeight() - $("div.inner").innerHeight();
  var padding = Math.round(whitespace / 2);
  $("div.inner").css({
    "padding-top": padding + "px";
  });
});
于 2012-09-29T09:51:25.283 回答
0

看看这个教程。您需要添加line-height和width 到您的 css 以使其工作。

于 2012-09-29T09:43:04.593 回答
0

在谷歌搜索并搜索了几个小时后，我终于找到了一个解决方案，可以将一个 div 水平和垂直居中在另一个 div 中。

        div.parent {
          display: block;
          text-align: center;
          line-height: 300px; /* the height of parent div */
        }
        div.child {
          display: inline-block;
          vertical-align: middle;
        }
  • 它不使用绝对定位，因此您不需要修复子宽度/高度。
  • 它不使用 display:table/tablecell，某些版本的 IE 不支持它。
  • 它是一个纯 CSS 解决方案，即使子 div 是动态加载的，也无需编写 javascript。

希望这可以帮助为此受苦的人。

于 2013-07-16T14:09:21.710 回答