EN
CSS - center button content
3 points
In this short article we would like to show how to center button content using CSS with absolute positioning.
Let's get some assumptions:
- buton has fixed size, e.g.
30x30px, - inside button we can put text or something different.
Simple example:
xxxxxxxxxx1
2
<html>3
<body>4
<style>5
6
a.button {7
position: relative; /* <------------------- required */8
background: silver;9
width: 160px; /* <------------------------- required */10
height: 60px; /* <------------------------- required */11
display: block; /* <----------------------- required */12
cursor: pointer;13
}14
15
span.content {16
position: absolute; /* <-------------------- required */17
left: 50%; /* <----------------------------- required */18
top: 50%; /* <------------------------------ required */19
font-size: 14px;20
transform: translate(-50%, -50%); /* <------ required */21
}22
23
</style>24
<a class="button" href="javascript: console.log('Button clicked!')">25
<span class="content">Click me!</span>26
</a>27
</body>28
</html>Note: check different ways how to center elements in this article.
