与 CSS 垂直对齐

发布于 2024-10-13 03:30:51 字数 905 浏览 9 评论 0原文

是的，是的，我知道这是另一个关于 CSS 垂直对齐的问题，而且之前已经被做过一百万次了。请放心，我已经多次遇到这个问题，并且我已经阅读了有关使用 CSS 垂直居中的各种方法。我在这里问是因为这些方法都不能完全满足我想要做的事情，我只是想确保我的怀疑（CSS 垂直对齐被破坏并且不会做我想做的事情）绝对正确。

首先，这是我的测试用例： http://www.game-point.net/misc/ testAlign/

这是标准：

我想相对于包含“TestTestTest...”文本的 DIV 垂直对齐“居中文本”。
我不想指定任何高度。
我希望“TestTestTest”和“居中文本”DIV 根据它们拥有的文本量和宽度限制动态获取它们的高度。
我不想使用 JavaScript。

即使在 CSS3 中这似乎也是不可能的，更不用说 CSS2 了。烦人的是我快到了；位置：绝对； top:-50%; DIV 的作用是将该 DIV 的顶部设置为容器 DIV 的中间位置。问题是内部 DIV 的样式 position:relative; top:-50%; 不会执行任何操作将内容向上移动一半高度，使其完全居中，因为 CSS 表示绝对定位的 DIV 没有高度，因此 top :-50% 没有意义。据我所知，这只是 CSS 的一个基本缺陷，没有什么特殊原因。绝对定位的元素确实有高度，但我不知道为什么 CSS 假装它没有高度。我只是想问是否有人对我如何达到预期的效果有任何想法，如图底部所示，考虑到我上面概述的标准。具有讽刺意味的是，IE6/7/8 的“破碎”盒子模型在怪异模式下给了我这样的效果。遗憾的是他们在 IE9 中“修复”了它，所以它不会再出现了。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

南风起 2024-10-20 03:30:51

好吧，我的怀疑确实是正确的，但这是不可能的（我认为这是 CSS 中的一个缺陷，它们应该提供一种在 DIV 内垂直对齐的方法，而不指定内部元素高度）。

我最终得到的最不糟糕的解决方案是：指定“中间”DIV 的高度 - 即使用 position:absolute 显示并包含真实内容的 DIV。我已将其添加到测试用例页面 http://www.game-point.net /misc/testAlign/ 标题下使用 line-height:100% 和硬编码的“中间”DIV 高度。这个解决方案意味着你必须提前知道要垂直居中的内容的高度，这很糟糕，因为浏览器会计算这个高度，你不需要指定它，但这是唯一的方法（直到 CSS 发挥作用）。我也使用 em 来指定高度，这样放大和缩小文本就不会破坏垂直居中。事实证明，对于我的 2 行“居中文本”，这个高度正好等于 2 em（至少在我的机器上）。如果我要更改该内容的高度，或者动态更改为 3 行或 1 行，则父 div 的硬编码 em 高度也必须更改。

所以，如果有人感兴趣的话，这是我最终得到的代码：

    <div style="border:1px solid black; padding-left:60px; width:250px; position:relative; word-wrap:break-word;">
        TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
        <!-- Unfortunately, must set this DIV's height explicitly or the contained DIV's relative positioning won't work, as this DIV is considered to have NO implicit height -->
        <div style="position:absolute; display:block; top:50%; left:0px; height:2em;">
            <div style="position:relative; top:-50%; background-color:#00aa00; line-height:100%;">
                Centred text<br/>
                Centred text
            </div>
        </div>
    </div>

OK, my suspicion was indeed correct and this is not possible (I think it's a flaw in CSS and they should provide a means of vertical alignment within a DIV without specifying inner element heights).

The least bad solution I ended up with was this: specify the height of the 'middle' DIV - that is, the DIV which is displayed using position:absolute and contains the real content. I've added it to the test case page at http://www.game-point.net/misc/testAlign/ under the heading With line-height:100% and hardcoded 'middle' DIV height. This solution means that you must know the height of the content to be vertically centred in advance, which sucks because the browser calculates this and you shouldn't need to specify it, but it's the only way (until CSS gets its act together). I used ems to specify the height too, so that zooming text in and out doesn't ruin the vertical centring. Turns out that for the 2 lines of 'Centred text' I had, this height equates to exactly 2 ems (at least on my machine). If I were to change that content's height, or it were to change dynamically to say 3 lines or 1 line, the parent div's hardcoded em height would also have to change.

So, here's the code I finally ended up with if anyone's interested:

    <div style="border:1px solid black; padding-left:60px; width:250px; position:relative; word-wrap:break-word;">
        TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
        <!-- Unfortunately, must set this DIV's height explicitly or the contained DIV's relative positioning won't work, as this DIV is considered to have NO implicit height -->
        <div style="position:absolute; display:block; top:50%; left:0px; height:2em;">
            <div style="position:relative; top:-50%; background-color:#00aa00; line-height:100%;">
                Centred text<br/>
                Centred text
            </div>
        </div>
    </div>

回复收藏 0 原文

野の 2024-10-20 03:30:51

使用 margin-top: 而不是 top:，如 margin-top: -25%;

回复收藏 0 原文

迟到的我 2024-10-20 03:30:51

问题是，内容的垂直处理是出于明显的原因而这样做的，我相信您已经意识到了。但你有点试图解决一个无法解决的问题，这并不是真正的问题。（当你知道事情为什么是这样时才有意义）

通过使用绝对位置，你只是将内容从自然流中取出。最好让所有东西都像它应该的那样，带有浮动和适当的尺寸或任何需要的东西，这样它就可以很好地降解并且在所有设备中看起来都不错。然后在 jquery 中编写两行代码来检查高度并对齐所有内容（这也适用于“所有”设备）。没有 JS 的 2-3% 的人将不得不忍受无聊的网站。

回复收藏 0 原文

夜声 2024-10-20 03:30:51

我已经开始使用以下代码......尽管需要工作。

基于 http://www.jakpsatweb.cz/css/ 上找到的项目css-vertical-center-solution.html

注意，您的代码以怪异模式运行，我已将其更改为 html 5

<!DOCTYPE HTML>
<html>
<head>
    <title>Vertical align test</title>
</head>

<style type="text/css">


#outer { overflow: hidden; position: relative; border: 1px solid red; }
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {position: relative; display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%; width: 100px} /* for explorer only */
/* optional: #inner[id] {position: static;} */

</style>

<body>
<h1>New test</h1>

<div id="outer">
  <div id="middle">
    <div id="inner">
      any text<br>
      any height<br>
      any content, for example generated from DB<br>
      everything is vertically centered
    </div>

  </div>

test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
</div>


</body>
</html>

I have started to get somewhere with the following code ... though needs work.

Based on items found on http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Note, your code runs in quirks mode, I have changed this to html 5

<!DOCTYPE HTML>
<html>
<head>
    <title>Vertical align test</title>
</head>

<style type="text/css">


#outer { overflow: hidden; position: relative; border: 1px solid red; }
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {position: relative; display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%; width: 100px} /* for explorer only */
/* optional: #inner[id] {position: static;} */

</style>

<body>
<h1>New test</h1>

<div id="outer">
  <div id="middle">
    <div id="inner">
      any text<br>
      any height<br>
      any content, for example generated from DB<br>
      everything is vertically centered
    </div>

  </div>

test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
</div>


</body>
</html>

回复收藏 0 原文

ζ澈沫 2024-10-20 03:30:51

.item {
    height: 40px;
    top: 50%;
    margin-top: -20px;
}

相对或绝对位置；

.item {
    height: 40px;
    top: 50%;
    margin-top: -20px;
}

position relative or absolute;

回复收藏 0 原文

~没有更多了~

关于作者

℉絮湮

暂无简介

文章

26 人气

关注发私信

友情链接

文江博客

与 CSS 垂直对齐

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（5）

关于作者

相关话题

热门标签

推荐作者

Promise

qq_lbRlsh

待＂谢繁草

yy2010hell

漫无边际

傲娇萝莉攻

友情链接

与 CSS 垂直对齐

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（5）

关于作者

相关话题

热门标签

推荐作者

Promise

qq_lbRlsh

待＂谢繁草

yy2010hell

漫无边际

傲娇萝莉攻

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。