CODEWITHSUNDEEP
htmlcss
Newbie
Newbie

Reputation: 1724

align inner div to center

I have 2 div, inner div & outer div. How to align inner div to center?
Here is my source code:

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

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

enter image description here
The outer div is on center, but the inner one is align left. How to align it to center?

Upvotes: 0

Views: 340

Answers (4)

Ashwani
Ashwani

Reputation: 303

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

Upvotes: 0

Iv&#225;n Noriega
Iv&#225;n Noriega

Reputation: 19

You must set the the property "text-align" in the .menu class.

.menu{
    text-align: center;
}

Upvotes: 1

Danny van Holten
Danny van Holten

Reputation: 932

The a element is displaying inline. Which will cause it to align as you want to align your text.

In that case you could use

.menu {
    text-align: center;
}

If you want your a to be 100% wide you can display it as a block, and center within the a element.

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

Upvotes: 2

AboutTime
AboutTime

Reputation: 317

Add text-align: center; to your parent 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>

Upvotes: 5

Related Questions