gpt4 book ai didi

css垂直居中

转载 作者:技术小花猫 更新时间:2023-10-29 10:09:51 24 4
gpt4 key购买 nike

我如何垂直居中 <div><div> 内?

到目前为止我的代码:

<div style="height:322px;overflow:auto;">
<div style="border: Solid 1px #999999;padding:5px;">
</div>
</div>

我试过“top:50%;”和“垂直对齐:中间;”没有成功

编辑: 好的,所以已经讨论了很多。而且我可能已经开始了另一场小型火焰 war 。但为了争论起见,我将如何用一张 table 来做呢?到目前为止,我已经将 css 用于其他一切,所以我并不是没有尝试采用“良好做法”。

编辑:内部 div 没有固定高度

最佳答案

简而言之,你被塞满了。在我最近问的一个问题中有更多关于此的信息 Can you do this HTML layout without using tables?基本上,CSS 狂热者需要掌握并意识到如果没有表格,有些事情是您无法做(或做不好)的。

这种反餐 table 的歇斯底里简直是荒谬。

表格单元格可以很好地处理垂直居中,并且就您可能关心的而言向后兼容。它们还比 float 、相对/绝对定位或任何其他 CSS 类型方法更好地处理并排内容。

Joel 在 Don't Let Architecture Astronauts Scare You 中创造(或至少普及)了“建筑师宇航员”一词.好吧,出于同样的原因,我认为“CSS Astronaut”(或“CSS Space Cadet”)这个词同样合适。

CSS 是一个非常有用的工具,但它也有一些非常严重的局限性。我最喜欢的 ishow 编号列表可能只显示为“3”。但不是“3)”或“(3)”(至少在 CSS3 生成内容之前——或者它是 CSS2.1?无论哪种方式都没有得到广泛支持)。真是个疏忽。

但比这更重要的是垂直居中和并排布局。这两个方面对于纯 CSS 来说仍然是一个巨大的问题。另一位发帖者决定将相对定位与负边距高度相结合是可行的方法。这比什么更好:

<html>
<head>
<title>Layout</title>
<style type="text/css">
#outer { height: 200px; border: 1px solid black; width: 600px; background-color: #DDD; }
#inner { width: 150px; border: 1px solid red; background: yellow; margin: auto; line-height: 100%; }
</style>
</head>
<body>
<table>
<tr>
<td id="outer">
<div id="inner">Inner</div>
</td>
</tr>
</table>
</body>
</html>

这将随时随地工作。

这是一个 article on vertical centering in CSS .为了实现类似的目的,他们使用了三个嵌套的 div 以及相对+绝对+相对定位只是为了获得垂直居中。很抱歉,无论是谁写的——以及任何认为这是一个好死的人——都完全失去了情节。

反驳在Tables vs CSS: CSS Trolls begone中给出.证据确实在布丁中。前 20 名 (Alexa) 网站中的绝大多数仍然使用表格进行布局。 有充分的理由。

因此,请自行决定:您是否希望自己的网站正常运行并花更少的时间让它正常运行?或者您想成为一名 CSS 宇航员?

关于css垂直居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/527811/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com