CSS居中技巧

发布于 2024-07-06 12:22:01 字数 340 浏览 6 评论 0原文

我最喜欢的仅使用 CSS 居中 xhtml 元素的等式如下：

display: block;
position: absolute;
width: _insert width here_;
left: 50%;
margin-left: _insert width divided by two & multiplied by negative one here_

在支持它的浏览器中还有更简单的 margin:auto 方法。还有其他人有棘手的方法来强制内容在其容器中居中显示吗？（垂直居中的奖励点）

编辑 - 哎呀，忘记了左边距中的“负”部分。固定的。

原文

My favorite equation for centering an xhtml element using only CSS is as follows:

display: block;
position: absolute;
width: _insert width here_;
left: 50%;
margin-left: _insert width divided by two & multiplied by negative one here_

There's also the simpler margin:auto method in browsers that support it. Does anyone else have tricky ways to force content to display centered in its container? (bonus points for vertical centering)

edit - oops, forgot the 'negative' part of one in the margin-left. fixed.

分享到QQ

分享到微博

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

发布评论

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

三生一梦 2024-07-13 12:22:01

div #centered{
 margin: 0 auto;
}

从我的经验来看，这似乎是最可靠的。

div #centered{
 margin: 0 auto;
}

seems to be the most reliable from my experience.

回复收藏 0 原文

惜醉颜 2024-07-13 12:22:01

坚持保证金：0 自动；用于水平对齐；
如果您需要垂直对齐，请使用position:absolute; 顶部：50%；顶部边距：-(宽度/2)px；但请注意，如果容器的宽度大于屏幕的宽度，则使用 Position:absolute 方法，容器的一部分将在左侧脱离屏幕。

回复收藏 0 原文

青柠芒果 2024-07-13 12:22:01

我不得不说，这似乎太过分了。对于旧浏览器，我倾向于将容器设置为 text-align:center; ，对于现代浏览器，将容器设置为 margin:auto; ，然后保持原样。然后重置元素中的文本对齐（如果它包含文本）。

当然，有些东西需要设置为块，并且宽度需要设置...但是您到底想要设计什么需要那么多的修改呢？

<div style="text-align:center">
     <div style="width:30px; margin:auto; text-align:left">
         <!-- this div is sitting in the middle of the other -->
     </div>
</div>

Well that seems like massive overkill, I've got to say. I tend to set the container to text-align:center; for old browsers, margin:auto; for modern browsers, and leave it like that. Then reset text-align in the element (if it contains text).

Of course, some things need setting as block, and widths need setting... But what on earth are you trying to style that needs that much hacking around?

<div style="text-align:center">
     <div style="width:30px; margin:auto; text-align:left">
         <!-- this div is sitting in the middle of the other -->
     </div>
</div>

回复收藏 0 原文

当梦初醒 2024-07-13 12:22:01

只要您确保 IE 处于标准模式，Margin:auto 就可以在所有浏览器中工作。

它比其他的更挑剔，要求你的文档类型是文档中的第一个，这意味着它之前没有空格（空格、制表符或换行符）。

如果你这样做，margin:auto 就是正确的选择！ :)

回复收藏 0 原文

人事已非 2024-07-13 12:22:01

只需注意 margin:auto; 仅当浏览器可以计算要居中的项目的宽度和父容器的宽度时，该方法才有效。在许多情况下设置 width:auto; 有效，但在某些情况下无效。

回复收藏 0 原文

命比纸薄 2024-07-13 12:22:01

这是 CSS 技巧的便捷书签

http://css-discuss.incutio.com/

包含很多居中也有技巧。

回复收藏 0 原文

何以畏孤独 2024-07-13 12:22:01

使用 50% 方法的绝对定位具有严重的副作用，即如果浏览器窗口比元素窄，则某些内容将出现在浏览器的左侧 - 无法滚动到它。

坚持使用自动边距——它们要可靠得多。

如果您在标准模式下工作（您应该如此），那么您可能关心的所有浏览器都支持它们。

如果您确实需要支持 Internet Explorer 5.5 及更早版本，则可以使用文本对齐技巧。

回复收藏 0 原文

埖埖迣鎅 2024-07-13 12:22:01

body {
    text-align: center;
}
#container {
    width: 770px;
    margin: 0 auto;
    text-align: left;
}

这在所有常用浏览器中都能很好地工作。正如已经提到的 margin: 0 auto; 不适用于所有半当前版本的 IE。

body {
    text-align: center;
}
#container {
    width: 770px;
    margin: 0 auto;
    text-align: left;
}

This works nicely in all the usual browsers. As already mentioned margin: 0 auto; won't work in all semi-current versions of IE.

回复收藏 0 原文

原谅过去的我 2024-07-13 12:22:01

尝试这个; 不知道它在 IE 中是否有效，但在 Fx 中工作得很好。它仅使用 CSS（无 JavaScript）在页面上居中放置 DIV 块，没有自动边距，并且 DIV 块内的文本仍保持左对齐。我只是想知道垂直居中是否也可以这样工作，但到目前为止还没有成功。

<html>
<head>
<title>Center Example</title>
<style>
.center {
   clear:both;
   width:100%;
   overflow:hidden;
   position:relative;
}
.center .helper {
   float:left;
   position:relative;
   left:50%;
}
.center .helper .content {
   float:left;
   position:relative;
   right:50%;
   border:thin solid red;
}
</style>
</head>
<body>
<div class="center">
   <div class="helper">
      <div class="content">Centered on the page<br>and left aligned!</div>
   </div>
</div>
</body>
</html>

Try this; don't know if it works in IE, works fine in Fx though. It centers a DIV block on the page using CSS only (no JavaScript), no margin-auto and the text within the DIV block is still left aligned. I'm just trying to find out if vertical-centering could work that way, too, but so far without success.

<html>
<head>
<title>Center Example</title>
<style>
.center {
   clear:both;
   width:100%;
   overflow:hidden;
   position:relative;
}
.center .helper {
   float:left;
   position:relative;
   left:50%;
}
.center .helper .content {
   float:left;
   position:relative;
   right:50%;
   border:thin solid red;
}
</style>
</head>
<body>
<div class="center">
   <div class="helper">
      <div class="content">Centered on the page<br>and left aligned!</div>
   </div>
</div>
</body>
</html>

回复收藏 0 原文

~没有更多了~