How to Use CSS to Vertically Center the Text in an Anchor, Within a Li

How to vertical align an anchor inside li?

Add vertical-align: middle to .vertical.

code updated https://jsfiddle.net/wksfdszu/1/

How to vertically center anchor tag text inside of a ul li

I Do something similar to what you're asking. Defining the parent as "display: table" and the element itself with "vertical-align:middle" & "display:table-cell" worked for me.

How can I use CSS to vertically center the text in an anchor, within a LI?

You could use display:table, etc. along with vertical-align:middle

ul.c {
    text-align:center;
    display:table;
}

ul li {   
    float:left;    
}

ul li a {
    text-decoration:none;
    border: 1px solid Maroon;
    padding:2px 12px;
    background:#FFEF8A;
    width:100px;
    height:52px;
    display:table-cell;
    vertical-align:middle;
}

ul li a:hover {
    background: #CCC;
}

Example: http://jsfiddle.net/kf52n/2/

anchor won't center vertically inside list item

As has been mentioned, your markup is invalid. Once that is fixed, you can center the anchor tag by doing something similar to this:

Set the width and text alignment to the anchor's parent instead of the anchor itself.

li {
  text-align: center;
  width: 100%;
}

To vertically align and element, you can take different approaches. The easiest is probably to give the element the same height and line-height. That way it will vertically center the text.

<div class="parent-element">
  <div class="child-element">
    <p>This is some text.</p>
  </div>
</div>

.parent-element {
  width: 100%;
}

.child-element {
  height: 100px;
  line-height: 100px;
}

You can also position it 50% from the top and then subtract half the height of the child element.

<div class="parent-element">
  <div class="child-element">
    <p>This is some text.</p>
  </div>
</div>

.parent-element { position: relative; }
.child-element {
  height: 100px;
  margin-top: -50px;
  position: absolute;
  top: 50%;
}

How do I vertically align text inside an anchor element, which is nested within an unordered list

you may use a pseudo element displayed as an inline-box using full height of li and vertical-aligned to midlle. DEMO

body, html {
    height:100%; /* needed for demo */
}
nav {
    height: 50%; /* increased for demo */
    width: 100%;
}
nav ul {
    height: 100%;
    margin: 0px;
}
nav ul li {
    height: 33%;
    box-shadow:inset 0 0 0 1px; /* show me li , for demo */
}
nav ul li:before {
    content:'';
    height:100%;
    display:inline-block;
    vertical-align: middle;
}

edit

If you also reset display and vertical-align on <a>, links can be spread on a few lines (demo below):

body,html {  height: 100%;}
nav {  height: 70%; /* height set for snippet demo purpose, could be really too much  */  width: 100%;}
nav ul {  height: 100%; /* will follow height, inherit height value , set in nav if any avalaible  */  margin: 0px;}
nav ul li {  height: 33%;  /* see me and my center*/  box-shadow: inset 0 0 0 1px;  background:linear-gradient(to top, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.2) 50%);}
nav ul li:before {  content: '';  height: 100%;  display: inline-block;  vertical-align: middle;}
a {  display: inline-block;  vertical-align: middle;}

<nav>  <ul>    <li><a href="html/login.html">Login</a>    </li>    <li><a href="html/user_registration.html">Register</a>    </li>    <li><a href="#">Programmes<br/> Offered</a>    </li>  </ul></nav>

Vertically centering an anchor within spans and li with css

Try the line-height and vertical-align properties:

.tab_outer  {
  line-height: 32px; /* Put the corresponding size here */
  vertical-align: middle;
}

Alternatively you can adjust the padding:

.tab_outer {
  padding-bottom: 3px;
}

Center align anchor within a `li` element?

ul.my-videos li .show-more {
    margin:0 auto;
    border:#aaa 1px solid;
    width: 100px;
    display: block;
}

if you want center an element width margin: 0 auto you need to set the width

and also, you need display:block

check jsfiddle here: http://jsfiddle.net/6HHKf/5/

How to center an anchor tag inside a parent element with the anchor taking up all space of parent

There are several ways you can do this. It sort of depends on what CSS you have going on around it, or other things you are trying to accomplish visually.

One thing to remember is that only the <a> itself is clickable. If you only center the anchor inside the <li>, the area around it will not be clickable—only its text will be. In order to make the entire <li> behave as though it is clickable, you need to make the anchor itself fill the entire space within the <li>. Then you can center the text within the anchor.

One way to do this is with flexbox:

li {
  height: 100px; // for example, to demonstrate vertical centering
}

a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

Note: don't use the a selector alone here; this is just for this code snippet. You should probably use a class instead.

FYI, the other answers provided so far don't actually center the text, and don't account for vertical centering.

CSS Positioning anchor inside li vertically aligned

One way is to change the display type to table and then force heights on the elements

ul.dropdown li {
display: table;
min-height: 45px;
}
ul.dropdown li a {
display: table-cell;
height: 45px;
vertical-align: middle;
}

The problem with doing it like this is that IE7 and ie6 need some special styling

ul.dropdown li {
position: relative;
display: block;
}
ul.dropdown li a {
position: absolute;
top: 50%;
display: block;
}
ul.dropdown li a <new extra element that you do not yet have> {
position: relative;
top: -50%;
}