CSS Alignment

CSS alignment - HTML elements can be aligned horizontally or vertically. It can be aligned on the left, center, right, or top, bottom, and center.

Center Alignment

Steps: To align HTML element horizontally Center:

Please keep in mind that the black level element takes the full available width.
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 is divided equally into the left and right margins.

General Syntax For Center Alignment Of Block Level Element

       
 .center {
width:N%;
margin:auto;
}

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

Source Code

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

Try it now

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%;
}

Try it now

Source Code

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

Try it now

Code Explanation

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

Center Align Text

Source Code

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

Try it now

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;.

Source Code

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

Try it now

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 Syntax

      .general-syntax {
  float: left;
}

Try it now

Source Code

          img {
  float: left;
}

Try it now

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 :

 

     img {
         float: right;
      }

Source Code

          img {
  float: right;
}

Try it now

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.

Source Code

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

Try it now

Code Explanation

Note Here,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;
}

Try it now

Source Code

          img {
  float: right;
  margin: 10px;
}
.clearfix {
  clear: left;
}
p {
  font-size: 19px;
}

Try it now

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.

Source Code

          div{
  border: 3px solid #4caf50;
  padding: 5px;
}
.img-first{
  float: right;
}
.clearfix::after{
  content: "";
  clear: both;
  display: table;
}
.img-second{
  float: right;
}

Try it now

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

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4