Центрирование div внутри li в css

Question

Хорошо, действительно легко, я знаю, но не для себя ... Я не могу понять это!

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

Мне нужен центр div внутри li, чтобы он совпадал с центром li,Прямо сейчас это выравнивается с левой стороной и левой стороной.Я знаю, что это должно быть легко исправить, но я просто не могу найти его !!Мне нужно, чтобы это был div, а не li.Пожалуйста, любая помощь будет принята с благодарностью.Спасибо всем и всем заранее!

Вот небольшой кусочек css, который у меня сейчас есть:

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

div - это выпадающий список мыши при использовании jquery, но мне нужноdiv больше, чем li, его левая сторона совпадает с левой стороной li, мне нужно, чтобы весь div центрировался под li.Я надеюсь это имеет смысл.Поле 0 авто не работает.

Answer 1

Дайте элементу div класс, например:

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

Затем задайте ему ширину, которая меньше ширины вашего li, и добавьте "margin: auto", чтобы отцентрировать его:

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