CSS: align list element both vertically and horizontally

Question

My page header has a misaligned <li> element. Here is a screenshot:

Basicly I want to say "center both elements vertically, one to the left and the other to the right".

I'm able to align a <li> element

horizontally with style="float:right"
vertically with style="vertical-align:middle".

...But not at the same time. Based on a similar question, I was expecting this to work:

style="float:right; vertical-align:middle"

It doesn't.

I also found some ways to align an entire list, but those were not applicable to aligning an individual element of a list.

Here is the relevant html-thymeleaf code:

    <div th:fragment="header">
        <nav>
            <ul class="navcontainer">
                <li class="navtitle"><a href="/"><h2>Personal Expense Tracker</h2></a></li>

                <li class="navlogout" th:inline="text" style="float:right"><a href="/logout">[[(${user != null ? 'Logout ' + user : ''})]]</a></li>

            </ul>
        </nav>
    </div>

Here is the relevant css code:

nav {
background-color: #333;
border: 1px solid #333;
color: #fff;
display: block;
margin: 0;
overflow: hidden;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
margin: 0;
display: inline-block;
list-style-type: none;
transition: all 0.2s;
}
nav > ul > li > a {
color: #aaa;
display: block;
line-height: 2em;
padding: 0.5em 2em;
text-decoration: none;
}
nav > ul > li > a:hover {
background-color: #111;
}

pol · Accepted Answer · 2017-01-02T04:06:11.363

With the code you added..

Using flexbox, you can do this:

nav {
  background-color: #333;
  border: 1px solid #333;
  color: #fff;
  display: block;
  margin: 0;
  overflow: hidden;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
display: flex;/* added */
align-items: center;/* added */
justify-content: space-between;/* added */
}

nav ul li {
  margin: 0;
  display: inline-block;
  list-style-type: none;
  transition: all 0.2s;
}

nav > ul > li > a {
  color: #aaa;
  display: block;
  line-height: 2em;
  padding: 0.5em 2em;
  text-decoration: none;
}

nav > ul > li > a:hover {
  background-color: #111;
}

<div th:fragment="header">
  <nav>
    <ul class="navcontainer">
      <li class="navtitle"><a href="/"><h2>Personal Expense Tracker</h2></a></li>

      <li class="navlogout" th:inline="text" ><a href="/logout">Log out</a></li>

    </ul>
  </nav>
</div>

I've edited the answer, see if that helps you.... Without the html and css you've tried with, I can't help much. — pol, Jan 02 '17 at 03:21

score 1 · Answer 2 · answered Jan 02 '17 at 03:28

the question is a little vague. If you could give me a visual of your problem / what you're looking for as a result I could probably help more.

Anyways here is the classic way to horizontally and vertically align an element to its parent.

Best of luck!

.container {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 50%;
  max-width: 1000px;
  height: 100px;
  background: grey;
}

.element {
  position: absolute;
  display: block;
  width: 50%;
  height: 50px;
  background: red;
  top: 50%;
  margin-top: -25px;
  left: 50%;
  margin-left: -25%;
}

<ul class="container">
  <li class="element"></li>
</ul>

score 0 · Answer 3 · answered Jan 02 '17 at 03:47

You should give height or line-height to the element (or in some case parent element has no height) so vertical-align:middle will not work because there is no height. First give height to the element which you want to set vertically middle if it does not work give height to the parent element.

CSS: align list element both vertically and horizontally

3 Answers3