Scribd
Upload
6 views

CSS Layout - Horizontal & Vertical Align

Alineamiento Horizontal y vertical con CSS

Uploaded by

Manuel Solorzano
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

CSS Layout - Horizontal & Vertical Align

Alineamiento Horizontal y vertical con CSS

Uploaded by

Manuel Solorzano
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

21/4/24, 20:46 CSS Layout - Horizontal & Vertical Align

Try it Yourself »
Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
Note: Center aligning has no effect if the width property is not set (or set to 100%).

Center Align Text


To just center the text inside an element, use text-align: center;

This text is centered.

Example
.center {
text-align: center;
border: 3px solid green;
}

Try it Yourself »

Tip: For more examples on how to align text, see the CSS Text chapter.

Center an Image
To center an image, set left and right margin to auto and make it into a block
element:

Example
img {
display: block;
margin-left: auto;

https://www.w3schools.com/css/css_align.asp 2/10
21/4/24, 20:46 CSS Layout - Horizontal & Vertical Align

margin-right: auto;
 Tutorials
width: 40%; Exercises  Services   Sign Up Log in
}
HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

Try it Yourself »

Left and Right Align - Using position


One method for aligning elements is to use position: absolute; :

In my younger and more vulnerable


years my father gave me some
advice that I've been turning over
in my mind ever since.

Example
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}

Try it Yourself »

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

Left and Right Align - Using float


Another method for aligning elements is to use the float property:

Example
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}

https://www.w3schools.com/css/css_align.asp 3/10

You might also like