2

我已经阅读了 stackoverflow 问题和一大堆关于垂直居中文本的文章，如下所示： http: //blog.themeforest.net/tutorials/vertical-centering-with-css/

这些技术似乎都不适用于最新版本的 Chrome。这只是 Chrome 的特性吗？我的文字总是出现在顶部。似乎每当我使用 50% 或 100% 作为 CSSheight或的值top时，什么都没有发生。

我只需要垂直居中的一行文本。line-height没有帮助，因为我希望它位于浏览器窗口的中间......我不知道浏览器窗口会有多高。

更新：问题显然是Foundation 4。一旦我删除以下所有内容，一切都会按预期工作：

<link href="/assets/foundation_and_overrides.css?body=1" media="screen" rel="stylesheet" />

关于如何使其与 Foundation 4 一起使用的任何想法？

4

1 回答 1

0

我经常使用各种垂直居中方法，它们仍然适用于最新版本的 chrome (31)。您可能忽略了一些小细节 - 您可以发布您尝试过的内容吗？

例如：

此技术使用带有元素的display:table-cell包装器：http: //jsbin.com/ofapiv/1/editvertical-align: middle; display: table-cell;

这种技术使用了一个幽灵元素（一个:before元素，height:100%它和它的兄弟都有vertical-align:middle）：http: //jsbin.com/uqutol/4/edit

这是简化为仅居中一行文本的幽灵元素技术：http: //jsbin.com/ubUxOgO/1/edit

<!DOCTYPE html>
<title>Centered line</title>
<style>
  html { height:100%; }
  .singleline {
    position: absolute;
    top:0; left:0; right:0;bottom:0;
    text-align:center;
  }
  .singleline:before {
    height:100%;
    vertical-align:middle;
    position:relative;
    content:'';
    display:inline-block;
  }
</style>
<div class="singleline">This is a centered line!</div>
于 2013-11-03T09:28:20.437 回答