
- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursors
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS Advanced
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Media Types
- CSS - Paged Media
- CSS - Aural Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS3 - Rounded Corner
- CSS3 - Border Images
- CSS3 - Multi Background
- CSS3 - Color
- CSS3 - Gradients
- CSS3 - Shadow
- CSS3 - Text
- CSS3 - Web font
- CSS3 - 2d transform
- CSS3 - 3d transform
- CSS3 - Animation
- CSS3 - Multi columns
- CSS3 - User Interface
- CSS3 - Box Sizing
- CSS Responsive
- CSS - Responsive Web Design
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS Central, Horizontal and Vertical Alignment
We can align an element or the content inside it by using CSS which provides various options for alignment of an element and its content horizontally, vertically or in center.
Horizontal Alignment
- Inline-elements
Inline elements or inline-block elements such as text, anchor, span, etc. can be aligned horizontally with the help of CSS text-align property.
- Block-level elements
Block-level elements such as div, p, etc. can be aligned horizontally with the help of CSS margin property, but width of element should not be 100% relative to the parent as then it wouldn’t need alignment.
- Block-level elements using float or position scheme
Elements can be aligned horizontally with the help of CSS float property which aligns multiple elements to either left/right and not in center or using CSS positioning scheme absolute method.
Example
Let’s see an example of CSS horizontal alignment −
<!DOCTYPE html> <html> <head> <title>CSS Horizontal Alignment</title> <style> .screen { padding: 10px; width: 70%; margin: 0 auto; background-color: #f06d06; text-align: center; color: white; border-radius: 0 0 50px 50px; border: 4px solid #000; } .seats span, .backSeats div{ margin: 10px; padding: 10px; color: white; border: 4px solid #000; } .seats span{ width: 120px; display: inline-block; background-color: #48C9B0; } .left{ text-align: left; } .right{ text-align: right; } .center{ text-align: center; } .seats{ text-align: center; } .backSeats div { background-color: #dc3545; } .leftFloat{ float: left; } .rightAbsolute{ position: absolute; right: 150px; } </style> </head> <body> <div class="screen">Screen</div> <div class="seats"> <span class="left">Adam</span> <span class="center">Martha</span> <span class="right">Samantha</span> <div class="backSeats"> <div class="leftFloat">Premium 1</div> <div class="leftFloat">Premium 2</div> <div class="rightAbsolute">Premium 3</div> </div> </div> </body> </html>
Output
This will produce the following output −
Vertical Alignment
- Inline-elements
Inline elements or inline-block elements such as text, anchor, etc. can be aligned vertically with the help of CSS padding, CSS line-height, or CSS vertical-align property.
- Block-level elements
Block-level elements such as div, p, etc. can be aligned vertically with the help of CSS margin property, CSS flex property along with CSS align-items, or with positioning scheme method absolute with CSS transform property.
Example
Let’s see an example of CSS vertical alignment −
<!DOCTYPE html> <html> <head> <title>CSS Horizontal Alignment</title> <style> .screen { padding: 10px; width: 70%; margin: 0 auto; background-color: #f06d06; text-align: center; color: white; border-radius: 0 0 50px 50px; border: 4px solid #000; } .seats span:not(.withPadding){ margin: 10px; padding: 10px; color: white; border: 4px solid #000; } .seats span:not(.vertical){ height: 40px; display: inline-block; background-color: #48C9B0; } .withPadding{ padding: 20px 20px 0px; height: 20px; color: white; border: 4px solid #000; } .vertical{ display: inline-table; background-color: #48C9B0; height: 40px; } .verticalText { display: table-cell; vertical-align: middle; } .withLineHeight{ line-height: 40px; } .seats{ text-align: center; } .backLeftSeat{ background-color: #dc3545; max-height: 100px; height: 70px; margin: 20px; width: 300px; display: inline-block; position: relative; resize: vertical; overflow: auto; border: 4px solid #000; } .withPosition{ position: absolute; top: 50%; left: 2px; right: 2px; color: white; padding: 20px; transform: translateY(-50%); } .backRightSeats{ height: 122px; width: 800px; float: right; display: inline-flex; flex-direction: row; justify-content: center; align-items: center; } .withFlex { background-color: #dc3545; border: 4px solid #000; margin-right: 10px; color: white; padding: 20px; } </style></head> <body> <div class="screen">Screen</div> <div class="seats"> <span class="withPadding">Adam</span> <span class="withLineHeight">Martha</span> <span class="vertical"><p class="verticalText">Samantha</p></span> <div> <div class="backLeftSeat"> <div class="withPosition">Premium Readjustable Sofa</div> </div> <div class="backRightSeats"> <div class="withFlex">Premium Solo 1</div> <div class="withFlex">Premium Solo 2</div> <div class="withFlex">Premium Solo 3</div> </div> </div> </body> </html>
Output
This will produce the following output −
When div is not adjusted
When div is adjusted
Central Alignment
We can align elements centrally with methods mentioned above in Horizontal, and Vertical alignment.
- Related Articles
- Horizontal and Vertical Center Alignment with Flexbox in CSS3
- Vertical alignment of an image using CSS
- Vertical Text, with Horizontal Letters in CSS
- Difference between Horizontal and Vertical Relationships
- Vertical and Horizontal Scrollbars on Tkinter Widget
- Difference between vertical integration and horizontal integration
- Difference between Horizontal Equity and Vertical Equity
- Set Text Alignment using CSS
- Setting Text Alignment using CSS
- Difference between Horizontal Axis and Vertical Axis Wind Turbines
- Difference between Vertical Marketing System and Horizontal Marketing System
- How to Create Horizontal and Vertical Tabs using JavaScript?
- How to set vertical alignment for a component in Java?
- How to set the horizontal alignment of text with JavaScript?
- Set Text Alignment Working with CSS
