How to Center Elements in CSS ?
CSS stands for Cascading Style Sheets. CSS is generally used to define the styles for your web pages, which includes the design, layout and variations in display for different devices and screen sizes. To add CSS into your web pages , it can be inserting in three ways :
- External CSS
- Internal CSS
- Inline CSS
External CSS:
To add an external style sheet, you should add an .css file extension. In HTML page, you must include a reference to the external style sheet file inside the <link> element, in the head section.
<!DOCTYPE html> <html> <head> <title> WEB PAGE </title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>LEARN WEB DEVELOPMENT /h1> <p>CSS is generally used to define styles for your web pages, which includes the design, layout and variations in display for different devices and screen sizes. </p> </body> </html>
To center the elements in the HTML page by using external CSS, then add css file which contains:
body {
background-color: blue;
}
h1 {
color: white;
text-align: center;
}
p {
text-align: center;
font-size: 20px;
}
Internal CSS
You can also add CSS by using the internal style sheet. The internal style is defined inside the <style> element, which is added in the head section.
<!DOCTYPE html>
<html>
<head>
<title> WEB PAGE </title>
<style>
body {
background-color: gold;
}
h1 {
color: black;
margin-left: 50px;
}
</style>
</head>
<body>
<h1>LEARN WEB DEVELOPMENT</h1>
<p>CSS is generally used to define styles for your web pages, which includes the design, layout and variations in display for different devices and screen sizes</p>
</body>
</html>
To center the elements by using internal CSS:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
p {
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<h1>LEARN WEB DEVELOPMENT</h1>
<p>CSS is generally used to define styles for your web pages, which includes the design, layout and variations in display for different devices and screen sizes</p>
</body>
</html>
Inline CSS
To use inline styles, add the style attribute to the relevant element in the HTML page. The style attribute can contain any CSS property such as font, color, padding , height and width .To center the elements by using inline CSS:
<!DOCTYPE html> <html> <body> <h1 style="color:blue; text-align:center;" >LEARN WEB DEVELOPMENT</h1> <p style="font-size:20px;" >CSS is generally used to define styles for your web pages, which includes the design, layout and variations in display for different devices and screen sizes</p> </body> </html>
To center an image
By using CSS, To center an image, set left and right margin to auto and make the display as block.
img{
display: block;
margin-left: auto;
margin-right: auto;
}
To Center a Div Horizontally with Flexbox
Flexbox is the way to center things on the page and makes designing responsive layouts much easier than it used to be. To center an element horizontally with Flexbox, just apply display: flex and justify-content: center to the parent element:
<!DOCTYPE html>
<head>
<style>
.container {
font-family: arial;
font-size: 24px;
margin: 25px;
width: 350px;
height: 200px;
outline: dashed 2px black;
display: flex;
justify-content: center;
}
.child {
width: 50px;
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="child"></div>
</div>
</body>
</html>