0

I am trying to centrally align the ul li text inside the main div. Exactly text align center the text. I don't want to do it with the margin. What is an elegant way?

I need to keep the display table setup for vertical alignment.

MY HTML:

<div class="main-div">
  <div>
    <a class="navbar-brand" href="#">
Anchor
                </a>
  </div>
  <ul>
    <li>
      <span>Center this</span>
    </li>
  </ul>
</div>

CSS:

.main-div {
  width: 100%;
  display: table;
}
ul {
  display: table-cell;
  vertical-align: middle;
}
li {
  list-style: none;
}

CodePen is here

good.learner
  • 121
  • 1
  • 2
  • 13
  • @dippas, my `display:table` makes the question unique – good.learner Sep 20 '18 at 21:42
  • in the 1st answer/accepted one to that question it using `display: table` and there is still a few (at least) of this question even with `display: table` so no not unique – dippas Sep 20 '18 at 21:51

0 Answers0