Teachnique
      CourseRoadmaps
      Login

      IntroductionSyntaxSelectorsInclusionMeasurement UnitsColorsBackgroundsFontsTextImagesLinksTablesBordersBorder BlockBorder InlineMarginsListsPaddingCursorOutlinesDimensionScrollbarsInline BlockDropdownsVisibilityOverflowClearfixFloatArrowsResizeQuotesOrderPositionHyphensHoverDisplayFocusZoomTranslateHeightHyphenate CharacterWidthOpacityZ-IndexBottomNavbarOverlayFormsAlignIconsImage GalleryCommentsLoadersAttr SelectorsCombinatorsRootBox ModelCountersClipWriting ModeUnicode-bidimin-contentAllInsetIsolationOverscrollJustify ItemsJustify SelfTab SizePointer EventsPlace ContentPlace ItemsPlace SelfMax Block SizeMin Block SizeMix Blend ModeMax Inline SizeMin Inline SizeOffsetAccent ColorUser Select

      GridGrid LayoutFlexboxVisibilityPositioningLayersPseudo ClassesPseudo Elements@ RulesText EffectsPaged MediaPrintingLayoutsValidationsImage SpritesImportantData Types

      TutorialRounded CornerBorder ImagesMulti BackgroundColorGradientsBox ShadowBox Decoration BreakCaret ColorText ShadowText2d transform3d transformTransitionAnimationMulti columnsBox SizingTooltipsButtonsPaginationVariablesMedia QueriesFunctionsMath FunctionsMaskingShapesStyle ImagesSpecificityCustom Properties

      IntroductionViewportGrid ViewMedia QueriesImagesVideosFrameworks

      Questions and AnswersQuick GuideReferencesColor ReferencesWeb browser ReferencesWeb safe fontsUnitsAnimation

      PX to EM converterColor Chooser & Animation

      Useful ResourcesDiscussion

      Feedback

      Submit request if you have any questions.

      Course
      Align

      CSS Tutorial

      This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.

      Align

      The term alignment, in context of web design and CSS, refers to the positioning and arrangement of elements or content within a layout, typically with respect to specific guidelines or reference points. Alignment is used to create visually pleasing and organized designs by ensuring that elements are positioned relative to each other or to the layout structure in a consistent and harmonious way.
      Alignment can be applied to various types of elements, including text, images, buttons, and more, to create a cohesive and polished design. CSS provides various properties that can be used to align the elements.
      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 Align - position Property

      There are several ways to align an element to left. Let us see few ways to achieve this.
      With the use of the CSS property position, the alignment of elements can be adjusted.
      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>
      Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.

      CSS Align - float Property

      With the use of the CSS property float, the alignment of elements can be adjusted.
      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 Align - text-align Property

      To align the text inside an element, use the property text-align.
      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 Align - padding Property

      A piece of text can be centered vertically using padding CSS property.
      <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>

      CSS Align - Center Text

      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>

      CSS Align - justify-content Property

      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 Align - Related Properties

      Following table lists all the properties related to alignment:
      Property
      Description
      align-content
      Aligns the content of a flex container along the cross-axis or a grid's block axis.
      align-items
      Controls the alignment of items of a flex container along the cross-axis.
      align-self
      Controls the alignment of an individual item within a container.
      vertical-align
      Determines the vertical alignment of inline, inline-block or a table cell text.
      line-height
      Sets the distance between lines of text.
      text-align
      Sets the horizontal alignment of inline, inline-block or a table cell text.
      margin
      Shorthand for margin values that can modify the alignment.