Loading lesson path
There are several ways to horizontally center elements in CSS, depending on the type of element.
Formula
Use margin: auto;, to horizontally center a block - level element (like < div >).Also specify a width for the element, to prevent it from stretching out to the edges of its container.
Formula
Center aligning has no effect on block - level elements if the width property is not set(or set to 100%). Below, the <div> element is centered and has a width of 50% (and the remaining space will be split equally between the left and right margins): This div element is centered.
Example.center
{
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}Formula
To center the text inside a block - level element, use text - align: center;.This text is centered.
Example p {
text-align: center;
}For more examples on how to align text, see the CSS Text chapter.
Formula
To center an image, set margin - left and margin - right to auto, and also turn the image into a block element:{
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}Formula
Left and Right Align - Using positionAnother method for aligning elements is to use position: absolute;
Absolute positioned elements are removed from the normal flow, and can overlap other elements.
Formula
This < div > element is positioned to the right, with the position:absolute property.
Example.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid green;
padding: 10px;
}Formula
Left and Right Align - Using floatAnother method for aligning an element to the left or right, is to use the float property:
Example.right
{
float: right;
width: 300px;
border: 3px solid green;
padding: 10px;
}