How to Vertically Align <Li> Elements in <Ul>

How to vertically align li elements in ul ?

I assume that since you're using an XML declaration, you're not worrying about IE or older browsers.

So you can use display:table-cell and display:table-row like so:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .toolbar ul {
            display:table-row;
        }
        .toolbar ul li
        {
            display: table-cell;
            height: 100px;
            list-style-type: none;
            margin: 10px;
            vertical-align: middle;
        }
        .toolbar ul li a {
            display:table-cell;
            vertical-align: middle;
            height:100px;
            border: solid 1px black;
        }
        .toolbar ul li.button a {
            height:50px;
            border: solid 1px black;
        }
    </style>
</head>
<body>
    <div class="toolbar">
        <ul>
            <li><a href="#">first item<br />
                first item<br />
                first item</a></li>
            <li><a href="#">second item</a></li>
            <li><a href="#">last item</a></li>
            <li class="button"><a href="#">button<br />
                button</a></li>
        </ul>
    </div>
</body>
</html>

How to vertical center li element in ul ?

added some CSS in the end,
using flex-box to center

header {    width: 100%;    position: fixed;    left: 0;    top: 0;}
nav {    height: 64px;    background: black;    color: white;}
div#brand {    width: 100px;    background: gray;    vertical-align: middle;    margin-left: 2em;    float: left;}div p {    display: block;    margin: 0;    line-height: 64px;    text-align: center;}
div#menu {    float: right;}
nav ul {    padding-left: 0px;    margin: 0;}
nav li {    height: 100%;    display: inline-block; /* to make list horizontal */    margin: 0 1.25em;}
nav li:hover {    background: gray;}
nav li a {    display: inline-block;    text-decoration: none;    color: white;    text-align: center;}
/* below lines were added */#menu,#menu ul {  height: 100%; }  #menu ul li{  display: inline-flex;  align-items: center  }

<html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Mijn navbar</title>
    <!-- include index.css -->    <link rel="stylesheet" type="text/css" href="index.css"></head><body>    <header>        <nav>            <div id="brand"><p>My Brand</p></div>            <div id="menu">                <ul>                    <li><a href="">LinkedIn</a></li>                    <li><a href="">Github</a></li>                    <li><a href="">Twitter</a></li>                </ul>            </div>        </nav>    </header>    </body></html>

Vertically align 'li' middle in 'ul'

Centering things vertically tends to be a tricky affair if you want cross-browser support, especially for IE and old browsers - unless you're willing to use JavaScript or a table. All common browsers support vertical centering within a table cell, so one option is to forget centering the <li> elements in the <ul> and instead create a table with height: 100% and one cell inside, with vertical-align: middle. It's not a popular answer but sometimes using a table is the most practical, as is well argued in this SO response.

If you do not want to use a table and can't use the display:table-cell for browser support, then you'll probably need to use JavaScript. Again, I would try to center the ul in a container, not the li in the ul. The approach is generally to find the height of the container, find the height of the ul, take the difference, cut it in half, and set the top or the margin-top of the ul to that value, depending on whether you want to use absolute positioning or not.

The exact best solution is hard to give without seeing the context of the list in your page.

Here's a fiddle using absolute positioning and JavaScript. Using margin-top and default position in this context is tricky because of margin collapse with the outer div, but if you can use it then you can use margin: 0 auto to do the horizontal centering, which is nice because then you can ignore the width.

Vertically center UL and horizontally align LI children

Just a bit of tweaking to your flexbox layout:

nav {  width: 780px;  height: 50px;  text-align: center;  background-color: pink;}
nav ul {  height: 100%;                     /* take height of nav parent */  list-style-type: none;  padding-left: 0;                  /* remove default UL padding */  display: flex;  justify-content: space-around;    /* horizontal alignment (applies to child elements) */  align-items: center;              /* vertical alignment (applied to child elements) */}
nav ul li {  /* display: inline-block;         <-- not necessary */  /* margin: 0 auto;                <-- not necessary */  padding: 10px;  background-color: lightgreen;}

<nav>  <ul>    <li>sample</li>    <li>sample</li>    <li>sample</li>  </ul></nav>

Align li elements vertically in mobile screen

You can do it with Flexbox and @media queries:

* {margin: 0; padding: 0; box-sizing: border-box}
#list {display: flex} /* displays flex-items (children) inline */
#list > li {  flex: 1; /* each takes 33.33% of the parent's width; adjust to your needs */  display: flex;  justify-content: center; /* centers them horizontally (instead of text-align: center) */  align-items: center; /* and vertically */  height: 50px;}
@media (max-width: 568px) {  #list {flex-direction: column} /* stacks them vertically */}

<div class="row">  <div class="col-md-12 col-sm-12">    <ul id="list" class='nav nav-pills'>      <li class='active'>        <a data-filter=".portfolio-filter-photography" href="#">          <strong>First</strong>        </a>      </li>      <li>        <a data-filter=".portfolio-filter-identity" href="#">          <strong>Second</strong>          </a>      </li>      <li>        <a data-filter=".portfolio-filter-faqs" href="#">          <strong>Third</strong>        </a>      </li>    </ul>  </div></div>

How to Vertically Align <Li> Elements in <Ul>