CSS Align
CSS Layout - Horizontal & Vertical Align
▲
▼
◀
►
Center elements
horizontally and vertically
To center a block element (like <div>) horizontally, you can simply use margin: auto; in your CSS code.
If you set the width of an element, it stops it from getting too wide and sticking to the sides of its box.
The element will use the given width, and the rest of the space will be evenly divided between the two margins.
Note: If the width property is not set or set to 100%, center alignment won't have any impact.
Center Align Text
To center the text within an element, apply the following style: `text-align: center;
Tip:For additional examples demonstrating how to position text, refer to the CSS Text section.
Center an Image
To position an image at the center, adjust the left and right margins to auto and convert it into a block element:
Left and Right Align - Using position
One method for aligning elements is to use position: absolute;:
Note: Elements positioned absolutely are taken out of the regular flow, allowing them to overlap with other elements.
Left and Right Align - Using float
A different way to arrange elements is by employing the float property:
The clearfix Hack
Note:If an item is taller than the one containing it and is set to float, it may overflow beyond its container. To address this, you can apply the "clearfix hack" (see the example below).
Next, we can apply the clearfix hack to the enclosing element to resolve this issue.
Center Vertically - Using padding
There are several ways to vertically center an element in CSS. One straightforward approach involves utilizing top and bottom padding:
To center content both vertically and horizontally, employ padding and text-align: center.
Center Vertically - Using line-height
Another tip involves employing the line-height property with a value identical to the height property:
Center Vertically - Using position & transform
If you can't use padding and line-height , an alternative is to use positioning along with the transform property.
Center Vertically - Using Flexbox
You can use flexbox to center elements, but be aware that flexbox isn't supported in Internet Explorer 10 and earlier versions.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Vertically Center Align Elements</h2>
<div class="center">
<p>Hello World!</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Center Text</h2>
<div class="center">
<p>This text is centered.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h2>Center an Image</h2>
<p>To center an image on a webpage, you can achieve this by setting the left and right margins to auto and converting it into a block element.</p>
<img src="/assets/files/horse.jpg" alt="Paris" style="width:40%">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Right align with the position property</h2>
<p>A demonstration of aligning elements to the right using the position property.</p>
<div class="right">
<p>When I was young and less experienced, my father shared some advice with me that I've been thinking about ever since.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Right align with the float property</h2>
<p>An illustration of aligning elements to the right using the float property:</p>
<div class="right">
<p>When I was younger and less experienced, my father shared some advice with me that I've been reflecting on ever since.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.img2 {
float: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Without Clearfix</h2>
<p>This picture is aligned to the right side. Additionally, it is taller than the surrounding element, causing it to extend beyond its container.</p>
<div>
<img class="img1" src="/assets/files/horse.jpg" alt="Horse" width="170" height="170"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>
<h2 style="clear:right">With New Modern Clearfix</h2>
<p>Include the clearfix technique in the parent element to resolve this issue:</p>
<div class="clearfix">
<img class="img2" src="/assets/files/horse.jpg" alt="Horse" width="170" height="170"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Center vertically with padding</h2>
<p>In this instance, we employ the padding property to centrally position the div element vertically.</p>
<div class="center">
<p>I am vertically centered.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
</style>
</head>
<body>
<h2>Center with padding and text-align</h2>
<p>In this instance, we employ padding and text-align to centrally position the div element both vertically and horizontally.</p>
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<h2>Center with line-height</h2>
<p>In this instance, we employ the line-height property, setting its value to match the height property. This ensures the centering of the div element.</p>
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Center with position and transform</h2>
<p>"In this example, we employ positioning and the transform property to center the div element both vertically and horizontally."</p>
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Flexbox Centering</h2>
<p>A box with both the justify-content and align-items properties set to "center" will position the item(s) at the center in both horizontal and vertical directions.</p>
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
</body>
</html>
HTML
CSS
Javascript
Jquery
PHP
MySQL