Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I have searched extensively and seen numerous examples on how to vertical-align text using the vertical-align property and the line-height property. However, all my efforts seem to bear no fruit as I am unable to get my text to align vertically. How do I do vertically align text to be centered? The height properties are not fixed so I can't use line-height.

HTML

<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 Offered</a></li>
    </ul>
</nav> 

CSS

nav
{
    height: 30%;
    width: 100%;
}

nav ul
{
    height: 100%;
    margin: 0px;
}

nav ul li
{
    height: 33%;
    width: 100%;
    vertical-align: middle;
}
like image 703
Kis Avatar asked Jun 22 '14 13:06

Kis


People also ask

How do you vertically align text in an element?

Answer: Use the CSS line-height property Suppose you have a div element with the height of 50px and you have placed some link inside the div that you want to align vertically center. The simplest way to do it is — just apply the line-height property with value equal to the height of div which is 50px .

How do you vertically align content inside a div?

The CSS just sizes the div, vertically center aligns the span by setting the div's line-height equal to its height, and makes the span an inline-block with vertical-align: middle. Then it sets the line-height back to normal for the span, so its contents will flow naturally inside the block.

Does text align work on anchor tag?

It is very Simple Anchor(a) is a inline element, it means width of inline element is equal to how much text width is there that much.so if you want horizontal center so you need to convert inline to block element, then add text align center. Show activity on this post. In HTML5 <center> tag is not supported.


2 Answers

If you can use flexbox, you can get away with the following css:

CSS

ul li a {
    display:flex; // Enables flexbox 
    justify-content: center; // Center on main axis
    align-items: center; // Center on cross axis
}

Update ( using auto margins )

You can also do it like this:

ul li { display:flex }
li a { margin: auto }

/* These rules are just to make things easier to see. */

nav {
  margin: 0 auto;
  margin-top: 5rem;
  border: 1px dotted green;
  width: 100%;
}

ul {
  padding: 0;
  display: flex;
  justify-content: space-around;
}

li {
  height: 3rem;
  padding: 2rem;
  border: 1px dotted red;
}


/* Here are what I am trying to illustrate */

ul li {
  display: flex;
}

a {
  margin: auto;
  /* or adjust them one by one, by targeting 
     the ones you want and setting
     using each margin like this:
  
    margin-top: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
  */
}
<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 Offered</a></li>
  </ul>
</nav>
like image 149
Ole Aldric Avatar answered Oct 04 '22 07:10

Ole Aldric


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>
like image 33
G-Cyrillus Avatar answered Oct 04 '22 07:10

G-Cyrillus