All methods and tricks to center things in HTML & CSS
Today had a small dialogue with my UI designer. She's trying to learn HTML and CSS, so she can help building our platform.
Designer: I always have BIG problems when I have to center elements in an HTML page.
Me: What do you mean for "center"?
Designer: Oh, ehr I mean putting the elements in the center of other elements or of the page itself.
Me: Vertical or horizontal alignment?
D: BOTH!
I thought a bit about it and... I realized that centering things is not very straight forward for a novice.
So I created for her kind a "cheat sheet" for centering things in an html page.
Maybe someone could find it useful!
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
/* General setups */
* {
box-sizing: border-box;
}
img {
width:50px;
height:50px;
}
/*
centring a div with two elements that should stay aligned on the same line.
Width will adapt on content
*/
.centring-v1 {
width: 100%;
text-align: center;
background-color: red;
margin-bottom: 100px;
}
.centring-v1 .image {
display: inline-block;
background-color: blue;
}
.centring-v1 .text {
background-color: green;
display: inline-block;
}
/*
Centring a div with two elements that should stay aligned on the same line.
Width will adapt on content. It's equivalent to the previous, but more clean
*/
.centring-v2 {
width: 100%;
text-align: center;
background-color: red;
margin-bottom: 100px;
}
.centring-v2 .inner-centring {
display: inline-block;
background-color: violet;
}
.centring-v2 .inner-centring .image {
float: left;
background-color: blue;
}
.centring-v2 .inner-centring .text {
background-color: green;
float: left;
}
/*
Centring when the container has sizes set (% or pixel).
Simpy margin: auto;
*/
.centring-v3 {
background-color: red;
}
.centring-v3 .inner-centring {
background-color: violet;
width: 80%;
margin: auto;
margin-bottom: 100px;
}
/*
Vertical and horizontal centring using absolute positioning, when the container
has sizes in px.
*/
.centring-v4 {
position: relative;
background-color: red;
width: 100%;
height: 500px;
margin-bottom: 100px;
}
.centring-v4 .inner-centring {
position: absolute;
top: 50%;
left: 50%;
background-color: violet;
width: 200px;
height: 200px;
margin-left: -100px;
margin-top: -100px;
}
/*
Vertical and horizontal centring using absolute positioning, when the container
has sizes in %. Only css3.
*/
.centring-v5 {
position: relative;
background-color: red;
width: 100%;
height: 500px;
margin-bottom: 100px;
}
.centring-v5 .inner-centring {
position: absolute;
top: 50%;
left: 50%;
background-color: violet;
width: 70%;
height: 70%;
transform: translate(-50%, -50%);
}
/*
Vertical and horizontal centring using tables. Always works,
Doesn't requite to set sizes, but it's a bit tricky.
*/
.centring-v6 {
background-color: red;
width: 100%;
height: 500px;
margin-bottom: 100px;
display: table;
}
.centring-v6 .cell {
background-color: violet;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.centring-v6 .cell .inner-centring {
background-color: blue;
display: inline-block;
/* FIXING WHITESPACE INLINE BLOCK */
font-size: 0;
}
.centring-v6 .cell .inner-centring .image {
float: left;
}
.centring-v6 .cell .inner-centring .text {
/* FIX WHITESPACE PER INLINE BLOCK, resetting font-size */
font-size: 14px;
float: left;
}
/*
Vertical alignment using line-height
*/
.centring-v7 {
background-color: red;
width: 100%;
height: 500px;
margin-bottom: 100px;
text-align: center;
}
.centring-v7 .inner-centring {
line-height: 500px;
background-color: violet;
display: inline-block;
text-align: center;
}
.centring-v7 .inner-centring .image {
float: left;
}
.centring-v7 .inner-centring .text {
float: left;
}
</style>
</head>
<body>
<div class="centring-v1">
<div class="image">
<img src="http://foto.hrsstatic.com/fotos/0/3/256/256/80/000000/http%3A%2F%2Ffoto-origin.hrsstatic.com%2Ffoto%2F5%2F4%2F2%2F2%2F542289%2F542289_a_2330048.jpg/7gykoR9kX9ra5mm0XyJmhQ%3D%3D/256,225/6/Panorama_di_Sicilia-Castelmola-Exterior_view-5-542289.jpg">
</div>
<div class="text">
My Text
</div>
</div>
<div class="centring-v2">
<div class="inner-centring">
<div class="image">
<img src="http://foto.hrsstatic.com/fotos/0/3/256/256/80/000000/http%3A%2F%2Ffoto-origin.hrsstatic.com%2Ffoto%2F5%2F4%2F2%2F2%2F542289%2F542289_a_2330048.jpg/7gykoR9kX9ra5mm0XyJmhQ%3D%3D/256,225/6/Panorama_di_Sicilia-Castelmola-Exterior_view-5-542289.jpg">
</div>
<div class="text">
My Text
</div>
</div>
</div>
<div class="centring-v3">
<div class="inner-centring">
<div class="image">
<img src="http://foto.hrsstatic.com/fotos/0/3/256/256/80/000000/http%3A%2F%2Ffoto-origin.hrsstatic.com%2Ffoto%2F5%2F4%2F2%2F2%2F542289%2F542289_a_2330048.jpg/7gykoR9kX9ra5mm0XyJmhQ%3D%3D/256,225/6/Panorama_di_Sicilia-Castelmola-Exterior_view-5-542289.jpg">
</div>
<div class="text">
My Text
</div>
</div>
</div>
<div class="centring-v4">
<div class="inner-centring">
<div class="image">
<img src="http://foto.hrsstatic.com/fotos/0/3/256/256/80/000000/http%3A%2F%2Ffoto-origin.hrsstatic.com%2Ffoto%2F5%2F4%2F2%2F2%2F542289%2F542289_a_2330048.jpg/7gykoR9kX9ra5mm0XyJmhQ%3D%3D/256,225/6/Panorama_di_Sicilia-Castelmola-Exterior_view-5-542289.jpg">
</div>
<div class="text">
My Text
</div>
</div>
</div>
<div class="centring-v5">
<div class="inner-centring">
<div class="image">
<img src="http://foto.hrsstatic.com/fotos/0/3/256/256/80/000000/http%3A%2F%2Ffoto-origin.hrsstatic.com%2Ffoto%2F5%2F4%2F2%2F2%2F542289%2F542289_a_2330048.jpg/7gykoR9kX9ra5mm0XyJmhQ%3D%3D/256,225/6/Panorama_di_Sicilia-Castelmola-Exterior_view-5-542289.jpg">
</div>
<div class="text">
My Text
</div>
</div>
</div>
<div class="centring-v7">
<div class="inner-centring">
<div class="image">
<img src="http://foto.hrsstatic.com/fotos/0/3/256/256/80/000000/http%3A%2F%2Ffoto-origin.hrsstatic.com%2Ffoto%2F5%2F4%2F2%2F2%2F542289%2F542289_a_2330048.jpg/7gykoR9kX9ra5mm0XyJmhQ%3D%3D/256,225/6/Panorama_di_Sicilia-Castelmola-Exterior_view-5-542289.jpg">
</div>
<div class="text">
My Text
</div>
</div>
</div>
</body>
</html>I know that many of this are very straight forward, others are more tricky. However I decided to add any I remember to this list.
Do you know other tricks to center things? :D
Written by ProGM
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Html
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#