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;
}

我也做了Fiddle。如果没有复杂的HTML / CSS / hacks，这种布局是否可行？

Answer 1

你可以这样做：

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

Answer 2

为什么不将样式应用于锚标记本身; Fiddle

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

Answer 3

这个怎么样：

#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>