Vertical align text in block element

Html Problem Overview

I know vertical alignment is always asked about, but I don't seem to be able to find a solution for this particular example. I'd like the text centered within the element, not the element centered itself:

li a {
    width: 300px;
    height: 100px;
    margin: auto 0;
    display: block;
    background: red;
}

<ul>
    <li><a href="">I would like this text centered vertically</a></li>
</ul>

Is there really no CSS property for this? I'd be willing to add a <span> in but I really don't want to add any more markup than that.

Html Solutions

Solution 1 - Html

According to the CSS Flexible Box Layout Module, you can declare the a element as a flex container (see figure) and use align-items to vertically align text along the cross axis (which is perpendicular to the main axis).

enter image description here

All you need to do is:

display: flex;
align-items: center;

See this fiddle.

Solution 2 - Html

You can also try

a {
  height:100px;
  line-height:100px;
}

Solution 3 - Html

li a {
width: 300px;
height: 100px;
display: table-cell;
vertical-align: middle;
margin: auto 0;
background: red;

}

Solution 4 - Html

You can try the display:inline-block and :after.Like this: ###HTML

<ul>
    <li><a href="">I would like this text centered vertically</a></li>
</ul>

###CSS

li a {
    width: 300px;
    height: 100px;
    margin: auto 0;
    display: inline-block;
    vertical-align: middle;
    background: red;  
}
li a:after {
  content:"";
  display: inline-block;
  width: 1px solid transparent;
  height: 100%;
  vertical-align: middle;
}

Please view the demo.

Solution 5 - Html

Would using padding be OK for your needs?: http://jsfiddle.net/sm8jy/:

li {
    background: red;
    text-align:center;
}
li a {
    padding: 4em 0;
    display: block;
}

Solution 6 - Html

You can also use inline-table alongside table-cell if you want to center your items vertically and horizontally. Below an example of using those display properties to make a menu:

.menu {
  background-color: lightgrey;
  height: 30px; /* calc(16px + 12px * 2) */
}

.menu-container {
  margin: 0px;
  padding: 0px;
  padding-left: 10px;
  padding-right: 10px;
  height: 100%;
}

.menu-item {
  list-style-type: none;
  display: inline-table;
  height: 100%;
}

.menu-item a {
  display: table-cell;
  vertical-align: middle;
  padding-left: 2px;
  padding-right: 2px;
  text-decoration: none;
  color: initial;
}

.text-upper {
  text-transform: uppercase;
}

.text-bold {
  font-weight: bold;
}

<header>
  <nav class="menu">
    <ul class="menu-container">
      <li class="menu-item text-upper text-bold"><a href="javascript:;">StackOverflow</a></li>
      <li class="menu-item"><a href="javascript:;">Getting started</a></li>
      <li class="menu-item"><a href="javascript:;">Tags</a></li>
    </ul>
  </nav>
</header>

It works by setting display: inline-table; to all the <li>, and then applying display: table-cell; and vertical-align: middle; to the children <a>. This gives us the power of <table> tag without using it.

This solution is useful if you do not know the height of your element.

The compatibilty is very good (relative to caniuse.com), with Internet Explorer >= 8.

Solution 7 - Html

Here's the general solution using just CSS, with two variations. The first centers vertically in the current line, the second centers within a block element.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
</head>
<body>
	<ul>
		<li>
			line one
		</li>
		<li>
			<span style="display: inline-block; vertical-align: middle">line two dot one
				<br />
				line two dot two</span>
		</li>
		<li>
			line three
		</li>
	</ul>
	<div style="height: 200px; line-height: 200px; border-style: solid;">
			<span style="display: inline-block; vertical-align: middle; line-height: normal;">line two dot one
				<br />
				line two dot two</span>
	</div>
</body>
</html>

As I understand it, vertical-align applies only to inline-block elements, e.g., <img>. You have to change an element's display attribute to inline-block for it to work. In the example, the line height expands to fit the span. If you want to use a containing element, such as a <div>, set the line-height attribute to be the same as the height. Warning, you will have to specify line-height: normal on the contained <span>, or it will inherit from the containing element.

Solution 8 - Html

display: grid; place-content: center;

no need margin.

li a {
    width: 300px;
    height: 100px;
    display: grid;
    place-content: center;
    background: red;
}

<ul>
    <li><a href="">I would like this text centered vertically</a></li>
</ul>

Solution 9 - Html

with thanks to Vlad's answer for inspiration; tested & working on IE11, FF49, Opera40, Chrome53

li > a {
  height: 100px;
  width: 300px;
  display: table-cell;
  text-align: center; /* H align */
  vertical-align: middle;
}

centers in all directions nicely even with text wrapping, line breaks, images, etc.

I got fancy and made a snippet

li > a {
  height: 100px;
  width: 300px;
  display: table-cell;
  /*H align*/
  text-align: center;
  /*V align*/
  vertical-align: middle;
}
a.thin {
  width: 40px;
}
a.break {
  /*force text wrap, otherwise `width` is treated as `min-width` when encountering a long word*/
  word-break: break-all;
}
/*more css so you can see this easier*/

li {
  display: inline-block;
}
li > a {
  padding: 10px;
  margin: 30px;
  background: aliceblue;
}
li > a:hover {
  padding: 10px;
  margin: 30px;
  background: aqua;
}

<li><a href="">My menu item</a>
</li>
<li><a href="">My menu <br> break item</a>
</li>
<li><a href="">My menu item that is really long and unweildly</a>
</li>
<li><a href="" class="thin">Good<br>Menu<br>Item</a>
</li>
<li><a href="" class="thin">Fantastically Menu Item</a>
</li>
<li><a href="" class="thin break">Fantastically Menu Item</a>
</li>
<br>
note: if using "break-all" need to also use "&lt;br>" or suffer the consequences

Solution 10 - Html

DO NOT USE THE 4th solution from top if you are using ag-grid. It will fix the issue for aligning the element in middle but it might break the thing in ag-grid (for me i was not able to select checkbox after some row). Problem is not with the solution or ag-grid but somehow the combination is not good.

DO NOT USE THIS SOLUTION FOR AG-GRID

li a {
	width: 300px;
	height: 100px;
	margin: auto 0;
	display: inline-block;
	vertical-align: middle;
	background: red;  
}

li a:after {
	content:"";
	display: inline-block;
	width: 1px solid transparent;
	height: 100%;
	vertical-align: middle;
}

Content Type	Original Author	Original Content on Stackoverflow
Question	user623520	View Question on Stackoverflow
Solution 1 - Html	melhosseiny	View Answer on Stackoverflow
Solution 2 - Html	ericbae	View Answer on Stackoverflow
Solution 3 - Html	Vlad	View Answer on Stackoverflow
Solution 4 - Html	Airen	View Answer on Stackoverflow
Solution 5 - Html	AJJ	View Answer on Stackoverflow
Solution 6 - Html	Anwar	View Answer on Stackoverflow
Solution 7 - Html	Steve11235	View Answer on Stackoverflow
Solution 8 - Html	Jehong Ahn	View Answer on Stackoverflow
Solution 9 - Html	RozzA	View Answer on Stackoverflow
Solution 10 - Html	Ankita Srivastava	View Answer on Stackoverflow