CODEWITHSUNDEEP
htmlcss
Alex
Alex

Reputation: 3991

Css div center alignment not working

I have tried to make horizontal menu in center of page but 'div align=center' not working properly.

.nav ul {
  display: block;
  list-style-type: none;
  margin: 0;
  position: absolute;
}
.nav li {
  display: inline-block;
  float: left;
}
.nav li a {
  display: block;
  min-width: 140px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-family: "Helvetica
Neue", Helvetica, Arial, sans-serif; color: #fff; background: #2f3036; text-decoration: none; } .nav li:hover ul a { background: #f3f3f3; color: #2f3036; height: 40px; line-height: 40px; } .nav div ul {display:block;} .nav li ul { display: none; } .nav
li ul li {
    display: block;
    float: none;
  }
  .nav li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
  }
  .nav ul > li:hover ul {
    display: block;
    visibility: visible;
  }
  .nav ul li:hover > ul {
    display: block;
  }
<div class="nav">
  <ul>

    <li><a href="#">Home</a>
    </li>
    <li>
      <a href="#">About </a>
      <ul>
        <li><a href="#">A1</a>
        </li>
        <li><a href="#">A2</a>
        </li>
      </ul>
    </li>

  </ul>
</div>

sample code I have tried to make horizontal menu in center of page but 'div align=center' not working properly.

Upvotes: 0

Views: 79

Answers (5)

Hitesh Misro
Hitesh Misro

Reputation: 3461

Remove position:absolute; from your ul and add these minor changes

.nav{
    width: 100%;
}
.nav ul {   
    display:block;
    list-style-type:none;
    margin: 0px auto;
    width: 50%;
}

Here's the solved fiddle

Upvotes: 1

aavrug
aavrug

Reputation: 1889

please remove the ul position: absolute; style other styling left as it is. These are the additional changes you have to do.

.nav {
    display: -webkit-box;
}
.nav ul {
    margin: 0 auto;
}

Upvotes: 0

ghodasara keval
ghodasara keval

Reputation: 21

Use as the below:

.nav {
    margin:0 auto;
}

Upvotes: 0

Samudrala Ramu
Samudrala Ramu

Reputation: 2106

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: #19c589;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li class="dropdown">
    <a href="#" class="dropbtn">About</a>
    <div class="dropdown-content">
      <a href="#">A1</a>
      <a href="#">A2</a>
      <a href="#">A3</a>
    </div>
  </li>
  <li><a href="#news">New</a></li>
</ul>

Upvotes: 0

Prasath V
Prasath V

Reputation: 1356

Remove position:absolute;. It doesn't take any margin or padding values.

.nav ul {
list-style-type:none;
margin:0 auto;
display:table;
}

Here solved fiddle link

Upvotes: 0

Related Questions