CODEWITHSUNDEEP
csshtmlalignment
Max Frai
Max Frai

Reputation: 64276

Divs align in parent block

#Menu
{
    position: relative;
    width: 90%;
    margin: 0 auto;
    height; 50px;
    min-height: 50px;
    padding: 5px;
}

And children blocks:

#MenuItem
{
    position: relative;
    float: left;

    margin: 0 auto;
    margin-top: 2px;
    margin-left: 5px;
    margin-right: 5px;

    text-align: center;
    width: 142px;
    height: 37px;
}

And html:

    <div id="Menu">
        <div id="MenuItem"><span>Home</span></div>
        <div id="MenuItem"><span>Home</span></div>
        <div id="MenuItem"><span>Home</span></div>
    </div>

How to make MenuItem divs to be centrated horizontally in parent div?

Upvotes: 0

Views: 1109

Answers (2)

Gajendra Bang
Gajendra Bang

Reputation: 3583

<ul id="nav">
  <li><a href="/">Home</a></li>
  <li><a href="/about/">About</a></li>
  <li><a href="/work/">Work</a></li>
  <li><a href="/clients/">Clients</a></li>
  <li><a href="/contact/">Contact</a></li>
</ul>

and here is the css

#nav{
  border:1px solid #ccc;
  border-width:1px 0;
  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
}
#nav li{
  display:inline;
}
#nav a{
  display:inline-block;
  padding:10px;
}

Upvotes: 1

Tiago Alves
Tiago Alves

Reputation: 1321

The following code should do it

#Menu
{
    position: relative;
    width: 90%;
    margin: 0 auto;
    height; 50px;
    min-height: 50px;
    padding: 5px;
    text-align: center; /* added this rule */
}

#MenuItem
{
    position: relative;
    display: inline-block;  /* changed from float:left */

    margin: 0 auto;
    margin-top: 2px;
    margin-left: 5px;
    margin-right: 5px;

    text-align: center;
    width: 142px;
    height: 37px;
}

Also, I would recommend you'd use

<ul id="Menu">
  <li>...</li>
  <li>...</li>
</ul>

instead of the nested divs.

Upvotes: 0

Related Questions