如何居中< div&gt ;? [英] How do I center a <div>?

问题描述

可能重复：

如何将DIV放在DIV中心？

想要集中< div> （我是HTML5新手，< center> 更多），并且通过一切手段避免使用表。这是我到目前为止所讨论的< div> 的CSS的代码：

I want to center a <div> (I'm new to HTML5 and the <center> tag is no more), and by all means avoid using a table. This is what I've got as CSS for the <div> in question so far:

#roundedcorner {
    -moz-border-radius: 15px;
    border-radius: 15px;
    background-image: url(file:///Macintosh%20HD/Users/julesmazur/Desktop/TAN3.0/Photos/bodydivbg.png);
    width: 960px;
    left: 50%;
    font-family: Ubuntu;
}

（任何人都好奇，Ubuntu由Google Web Fonts提供）。

(for anyone curious, Ubuntu courtesy of Google Web Fonts).

推荐答案

典型的技巧是 margin：auto 。

除了我对您的代码有一些评论外（因为您是初学者）。

Besides that I have a few comments on your code (since you're a beginner).

• left：50％; 不做任何操作，除非您更改位置样式，例如 position：relative; 或 position：absolute;


• 容器 div 在需要大于它 - 否则中心它真的不意味着什么。这是因为样式 margin：auto 是相对于父容器，即它需要空格。


• 对于Google Web Fonts，请确保您拥有 @ font-face 。另外，使用替代品。不是所有的浏览器都支持网络字体，而且你拥有的控制越多：越好。一个例子是 font-family：Ubuntu，Arial，Sans; ，从最可能的备份到最有可能的备份。

• left: 50%; does nothing unless you change the position style, e.g., position: relative; or position: absolute;
• The container the div is in needs to be larger than it -- otherwise centering it really doesn't mean anything. This is because styles like margin: auto are relative to the parent container, i.e., it needs space.
• For Google Web Fonts, make sure you have your @font-face with it. Also, use alternatives. Not all browsers support web fonts, and the more control you have: the better. An example would be font-family: Ubuntu, Arial, Sans;, ordered from most preferred to most likely backups.

这篇关于如何居中< div&gt ;?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！