CODEWITHSUNDEEP
csshtmlalignmenthtml-lists
luv2code
luv2code

Reputation: 1296

Centering div within li in css

Ok really easy I know but not for me... I can not figure this out!

<ul>
  <li>Hi</li>
  <li>Hello World
    <div>Hello again</div>
  </li>
  <li>Hola</li>
</ul>

I need the center of the div inside the li to match up with the center of the li. Right now it aligns with left side and left side. I know that there should be an easy fix for this but I just can not find it!! I need it to be a div and not an li. Please any help will be greatly appreciated. Thank you to anyone and everyone in advance!

Here is the little piece of css that I have now:

 #show li{float: left;
          padding: 10px;
          width: 100px;
          display: block;}
    .sub{position: absolute; 
         display: block; 
         background: #333;
         color: white; 
         width: 910px;
         margin: 0 auto;}

The div is a drop down on mouseover using jquery, but I need the div be larger than the li, it's left side is aligning to the left side of the li, I need the entire div to center underneath the li. I hope this makes sense. The margin 0 auto does not work.

Upvotes: 4

Views: 11588

Answers (1)

Clay Garrett
Clay Garrett

Reputation: 1023

Give the div a class, like this: 

<div class="someClass">Hello again</div>

Then, give it a width that's less than the width of your li and add "margin:auto" to center it:

.someClass { width: 80%; margin:auto }

Upvotes: 3

Related Questions