css - CSS水平居中一个div

Question

我有一个非常简单的布局，我试图在 CSS 中实现，但我没有任何运气。我想要做的就是（水平）居中包含一个链接的 div。 div 的大小应基于其内容的大小。

我尝试了一堆自动边距、文本对齐和显示类型的组合，但似乎无法弄清楚（我是 CSS 菜鸟）。我做了一个非常简单的案例（我能做的最好的）

HTML：

<body>

    <div class="myDiv">
        <a href="google.com">google.com</a>
    </div>

</body>

CSS：

.myDiv
{
    background:lightblue;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

.myDiv a
{
     text-decoration:none;
}

我也做了一个小提琴。这种类型的布局是否可能没有复杂的 HTML/CSS /hacks？

score 1 · Accepted Answer

你可以这样做：

.myDiv
  {
   display:table;
   margin:auto;
  }

score 0 · Accepted Answer

为什么不将样式应用到锚标签本身呢？小提琴

.myDiv {
    text-align:center;
}
.myDiv a {
    text-decoration:none;
    background:lightblue;
    padding: 5px;
}

score 0 · Accepted Answer

这个怎么样：

#container
{
    text-align:center;
}
.myDiv
{
    background:lightblue;
    display:inline;
}

.myDiv a
{
     text-decoration:none;
}

和：

<body>
    <div id="container">
        <div class="myDiv">
            <a href="google.com">google.com</a>
        </div>
    </div>
</body>

看看这个 JFiddle：http: //jsfiddle.net/VvL6M/11/

3 回答 3