CSS Alignment

CSS Alignment is used to align horizontally, vertically, or center. The horizontal alignment will be in the left, center and right & vertical alignment will be in the top, bottom, and center.

Center Alignment

Steps: To align HTML element horizontally Center:

Step1:Please keep in mind that the black level element takes full available width.
Step2: Assigning a constant width value of the block-level element prevents it from stretching out to the edge of the container. Now, assign margin: auto; property to the block element. In this case, the block-level element is aligned horizontally center, and the remaining empty space divided equally into the left and right margins.

General Syntax For Center Alignment Of Block Level Element

Statement     .center {width:80%;margin:auto;}     

Note:The HTML element can be aligned either horizontal or vertical. The horizontal alignment will be left, center and right while vertical alignment will be top, bottom, and center.

Example

General Syntax

     .center-alignment{ margin: auto; }

Source Code

      
         .center-alignment{ 
margin: auto; 
width: 50%; 
border: 3px solid green; 
padding: 10px;
 }

Code Explanation

RememberHTML block-level element can be aligned horizontally centered by applying margin: auto property while HTML inline element can be aligned horizontally whenever its display property can be changed block and then apply CSS margin:auto property.

General Syntax For Center Alignment Of Inline Level Element

General Syntax

     .center {
   display: block;
   margin: auto;
   width: 80%;
}

Source Code

      
         .ex {
   display: block;
   width: 100%;
   text-align: center;
   text-decoration: none;
   font-size: 25px;
}

Code Explanation

Note:In this example, the inline element has been aligned center horizontally.

Center Align Text

General Syntax

     .center-alignment{ text-align: center; }

Source Code

      
         .center-alignment{ 
text-align: center;
border: 2px solid orange;
font-size: 16px; 
}

Code Explanation

Note: To align the text center inside the container, use CSS text-align:center property.

Center Alignment Of The Image

Please keep in mind that <img> is an inline element hence change inline element to block-level element by display:block and then apply margin:auto;.

General Syntax

     img{ 
display:block; 
margin-left:auto; 
margin-right:auto; 
}

Source Code

      
         img{ 
display:block; 
margin-left:auto;
margin-right:auto; 
width: 40%; 
}

Code Explanation

Remember: Since the image is an inline element hence you have to change its display property to block and then apply margin property to auto. Now, the image will be aligned horizontally center.

Left And Right Alignment

CSS Float

The CSS float property is a positioning property. It is displayed as an element either left or right and allowing other elements to wrap around the floated item.

CSS Float Property Value

left-It is used to float the element to the left.
right-It is used to float the element to the right.
none-It removes the float property from an element.
inherit-It is used to inherit float property from its parent element.

CSS Float Left Property

General float syntax:

General Syntax

     img{ float: left; }

Source Code

      
         img{ float: left; }

Code Explanation

Remember- CSS float properties are very useful for the alignment of images either left or right to the container. The float left property is used to shift the image left to the container.

CSS Float:Right

General syntax for float:right :

General Syntax

     img{ float: right; }

Source Code

      
         img{ float: right; }

Code Explanation

Note:To place the image right direction of the container, use the CSS float right property.

Floating Element Next To Each Other

Basically,block-level element i.e(<div>) displays top to bottom.After providing float property to the block label element exit inside the container, it displays all the floated items next to each other.

General Syntax

     div{ 
float: left;
padding: 15px; 
} 
.first-block{ 
background: red; 
} 

.second-block{ 
background: yellow; 
} 

.block-third{ 
background: green; 
}

Source Code

      
         div{ 
float: left; 
padding: 15px; 
} 
.first-block{
background: red; 
} 
.second-block{ 
background: yellow; 
} 
.third-third{ 
background: green; 
}

Code Explanation

NoteHere,CSS float left properties are applied to the <div> element therefore all div will be aligned horizontally on the x-axis from left to right.

Clearing Float Property

After applying float property, the element comes after the floating element is also wrapped around the float element. The clear property prevents the wrap property and displays the elements(element after floated item) as a normal flow.

Clear Property Values

inherit - The element inherits the clear value from its parent.
left - Floating element does not allow on the left side.
right - Floating element does not allow on the right side.
none - It Allows floating elements on both sides and this is the default value.

General Syntax

     .clear{ clear:left; }

Source Code

      
         img {
    float: right;
    margin: 10px;
}

.clearfix {
    clear: left;
}

p {
    font-size: 19px;
}

Code Explanation

Note CSS float can be cleared by using CSS clear property so that content flow from normal flow means top to bottom.

Fixing Of Layout Problem

When a floating element has a larger size than its parent container then floated element is overflow due to its large size. To prevent overflow, use overflow:hidden property or modern hack clearfix hack technique.

General Syntax

     .clearfix::after {
    content: "";
    clear: both;
    display: table;
}

Source Code

      
         div {
    border: 3px solid #4caf50;
    padding: 5px;
}

.img-first {
    float: right;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.img-second {
    float: right;
}

Code Explanation

Note:Here, CSS overflow:hidden property is used to solve the overflow problem. Although, it can be also solved by clearfix hack technique.

Online Test / Quiz

Question set 1

Our Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS