Selected Reading
Q&A

CSS Forms

Styling Input Fields

Use the width property to determine the width of the input field:

There are two main aspects of alignment:

Horizontal alignment

This refers to the positioning of elements along the horizontal axis, which typically runs from left to right. Common horizontal alignment options include:

Left alignment: Elements are aligned to the left side of a container or layout.
Center alignment: Elements are positioned in the center of a container or layout horizontally.
Right alignment: Elements are aligned to the right side of a container or layout.

Vertical alignment

This refers to the positioning of elements along the vertical axis, which typically runs from top to bottom. Common vertical alignment options include:

Top alignment: Elements are aligned to the top of a container or layout.
Middle or Center alignment: Elements are centered vertically within a container or layout.
Bottom alignment: Elements are aligned to the bottom of a container or layout.

CSS Alignment - Using Position

With the use of the CSS property position, the alignment of elements can be adjusted.

Example

Here is an example of setting alignment using position:

<html>
<head>
<style>
   .right-alignment {
      position: absolute;
      right: 0px;
      width: 100px;
      border: 3px solid #0d1601;
      background-color: rgb(244, 244, 135);
      padding: 10px;
   }
   .left-alignment {
      position: relative;
      left: 0px;
      width: 100px;
      border: 3px solid #0c1401;
      background-color: blanchedalmond;
      padding: 10px;
   }
   .center-alignment {
      margin: auto;
      border: 3px solid black;
      padding: 5px;
      background-color: rgb(241, 97, 126);
      width: 120px;
      position: relative;
   }
</style>
</head>
<body>
   <div class="right-alignment">
      <h3>Right align</h3>
      <strong>Right align with position:absolute</strong>
   </div>
   <div class="left-alignment">
      <h3>Left align</h3>
      <strong>Left align with position:relative</strong>
   </div>
   <div class="center-alignment">
   <h3>Center align</h3>
   <strong>Vertically & horizontally centered using position:relative and margin:auto.</strong>
  </div>
</body>
</html>

Absolute positioned elements are removed from the normal flow, and can overlap elements.

CSS Alignment - Using Float

With the use of the CSS property float, the alignment of elements can be adjusted.

Example

Here is an example of setting alignment using float:

<html>
<head>
<style>
   .right-alignment {
      float: right;
      width: 100px;
      border: 3px solid #0d1601;
      background-color: rgb(244, 244, 135);
      padding: 10px;
   }
   .left-alignment {
      float: left;
      left: 0px;
      width: 100px;
      border: 3px solid #0c1401;
      background-color: blanchedalmond;
      padding: 10px;
   }
</style>
</head>
<body>
   <div class="right-alignment">
      <h3>Right align</h3>
      <strong>Right align with float:right</strong>
   </div>
   <div class="left-alignment">
      <h3>Left align</h3>
      <strong>Left align with float:left</strong>
   </div>
</body>
</html>

CSS Alignment - Using text-align

To align the text inside an element, use the property text-align.

Example

Here is an example to align the text inside a <div> element:

<html>
<head>
<style>
   div {
      width: 300px;
      border: 3px solid #0d1601;
      padding: 10px;
      margin-bottom: 1cm;
   }
   .right-alignment {
      text-align: right;
      color:red;
   }
   .left-alignment {
      text-align:left;
      color:green;
   }
   .center-alignment {
      text-align: center;
      color:blue;
   }
</style>
</head>
<body>
   <div class="right-alignment">
      <h3>Right align</h3>
      <strong>Text right aligned</strong>
   </div>
   <div class="left-alignment">
      <h3>Left align</h3>
      <strong>Text left aligned</strong>
   </div>
   <div class="center-alignment">
      <h3>Center align</h3>
      <strong>Text center aligned</strong>
   </div>
</body>
</html>

CSS Alignment - Using Padding

A piece of text can be centered vertically using padding CSS property.

Example

<html>
<head>
<style>
   .center-alignment {
      padding: 100px 0;
      border: 3px solid black;
      margin: 5px;
      background-color: lightblue;
   }
</style>
</head>
<body>
   <div class="center-alignment">
      <p>Vertically centerd using padding.</p>
   </div>
</body>
</html>

Here is an example if you want to center the text vertically as well as horizontally, you need to use text-align:center along with padding:

<html>
<head>
<style>
   .center-alignment {
      padding: 100px 0;
      text-align: center;
      border: 3px solid black;
      margin: 5px;
      background-color: lightblue;
   }
</style>
</head>
<body>
   <div class="center-alignment">
      <p>Vertically & horizontally centerd using padding and text-align properties.</p>
   </div>
</body>
</html>

Here is an example if you want to center the text vertically as well as horizontally, using flex and justify-content properties:

<html>
<head>
<style>
   .center-alignment {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 300px;
      border: 3px solid black;
      font-size: larger;
      background-color: lightblue;
   }
</style>
</head>
<body>
   <div class="center-alignment">
      <p>Vertically & horizontally centered using flex and justify-content.</p>
   </div>
</body>
</html>

CSS Alignment - Associated Properties

Following table lists all the properties related to alignment:

S.No	Property	Description
1	align-content	Aligns the content of a flex container along the cross-axis or a grid's block axis.
2	align-items	Controls the alignment of items of a flex container along the cross-axis.
3	align-self	Controls the alignment of an individual item within a container.
4	vertical-align	Determines the vertical alignment of inline, inline-block or a table cell text.
5	line-height	Sets the distance between lines of text.
6	text-align	Sets the horizontal alignment of inline, inline-block or a table cell text.
7	margin	Shorthand for margin values that can modify the alignment.