将内部div对齐到中心

Question

我有2个div，内部div＆amp;外部的div。如何将内部div与中心对齐？
这是我的源代码：

<div class="menu">
    <a href="AdminHomePage.php?id=logout">Manage Staff</a>
</div>

这是CSS：

.menu{
    margin: 100px auto;
    z-index: 2;
    opacity: 0.9;
    text-shadow: 2px 2px 5px #000000;
    width:300px;
    border-style: solid;
    border-width: 1px;
}

.menu a{
    color: #fff;
    font-size: 35px;
    border-style: solid;
    border-width: 1px;
}

外部div位于中心，但内部div对齐。如何将它与中心对齐？

Answer 1

添加text-align：center;你的父divs css

.menu{
    margin: 100px auto;
    z-index: 2;
    opacity: 0.9;
    text-shadow: 2px 2px 5px #000000;
    width:300px;
    border-style: solid;
    border-width: 1px;
    text-align: center;
}

.menu a{
    color: #fff;
    font-size: 35px;
    border-style: solid;
    border-width: 1px;
}

<div class="menu">
    <a href="AdminHomePage.php?id=logout">Manage Staff</a>
</div>

Answer 2

a元素以内联方式显示。这将导致它对齐，因为您想要对齐文本。

在这种情况下，您可以使用

.menu {
    text-align: center;
}

如果你想让你的a 100％宽，你可以将它显示为一个块，并在一个元素中居中。

.menu a {
    display: block;
    text-align: center;
}

Answer 3

.menu {
    text-align: center;
}

**if you want to make whole width click-able for your link, you can use "display:block" property.
.menu a {
    display : block;
}