How to center text in anchor tag without line height?

HTML & CSS
1

I am trying to find the most elegant way to center text in an anchor tag, and have already googled for answers but couldn’t find something that really fits my design principals.

In general I like to only specify a number once, so that if I have to change it later on I only need to change one place. In programming this is very easily done, but with css, if I set the div height to 50px, I don’t want to set the anchor height and line-height also to 50px just to center the text

<div><a>this is a test</a></div>

[style]
div{
  height: 50px;
}
a{
  height: 100%;
}
[/style]
2

Try this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
div{
	width:200px;
	background:#f9f9f9;
	display:table;
	margin:0 0 10px;
	text-align:center;
}
a{	display:table-cell;	vertical-align:middle;}
.a{height:100px;}
.b{height:50px;}
.c{height:150px}
</style>
</head>

<body>
<div class="a"><a href="#">Test</a></div>
<div class="b"><a href="#">Test</a></div>
<div class="c"><a href="#">Test</a></div>
</body>
</html>

That should work back to IE8,

For modern browsers you could use flexbox.

If you want older support than IE8 then there are other more convoluted methods.

3

Exactly what I need! Thank you :smile:

4

You are welcome.

Just for info here’s the flexbox version.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
div{
	width:200px;
	background:#f9f9f9;
	display:flex;
	margin:0 0 10px;
	justify-content:center;
	align-items:center;
}
.a{height:100px;}
.b{height:50px;}
.c{height:150px}


</style>
</head>

<body>
<div class="a"><a href="#">Test</a></div>
<div class="b"><a href="#">Test</a></div>
<div class="c"><a href="#">Test</a></div>
</body>
</html>

Modern browsers only,

5

Thanks a lot! I think I will go with table for now, just in case the user browsers don’t support. In the future when older browsers become more obsolete will switch to flexbox.

6

Yes so would I :smile:

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.