CSS Max-width
CSS
The CSS max-width property is used to set the maximum width of an element.
CSS max-width property
➔ The max-width attribute prevents its calculated width from being larger than a specified value.
➔ It is used to create responsive web designs that ensure that content remains in the correct view and is effective on different screen sizes..
➔ Themax-width property overrides the width property if the calculated width is larger than the specified maximum width value.
➔ The margin:auto; technique for centering hotizontally elements in a container only works on block-level elements (such as div, p, section), but its width or max-width must be less than that of its parent element.
Syntax
max-width: none | length | initial | inherit;
Property values
| Value | Description |
|---|---|
| none | This is default. |
| length | Specifies the maximum width in px, cm, etc. |
| percentage | Specifies the maximum width as a percentage of the width of the containing (parent) block element. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Example (Horizontally center)
<!DOCTYPE html>
<html>
<head>
<title>CSS Center horizontally Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<style>
.div1 {
border: 1px solid black;
height: 200px;
}
.p1 {
border: 1px solid red;
margin: 20px auto;
width: 50%;
}
</style>
</head>
<body>
<h3>Center horizontally an element in container.</h3>
<p>The margin:auto; technique for centering hotizontally elements in a container only works on block-level elements
(such as div, p, section), but its width or max-width must be less than that of its
parent element.</p>
<div class="div1">
<p class="p1">This paragraph block element is horizontally
centered in a div container.</p>
</div>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
Example (Vertically center)
<!DOCTYPE html>
<html>
<head>
<title>CSS Center vertically Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<style>
div {
border: 1px solid black;
height: 200px;
display: flex;
align-items: center;
}
p {
border: 1px solid red;
}
</style>
</head>
<body>
<h3>CSS Center vertically Example</h3>
<h3>Center vertically an element in container.</h3>
<div>
<p>Lorem ipsum dolor sit amet</p>
</div>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
Example (Horizontally and Vertically M1)
<!DOCTYPE html>
<html>
<head>
<title>CSS horizontaly vertically center Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<style>
.div1 {
border: 1px solid black;
height: 200px;
display: flex;
}
.p1 {
border: 1px solid red;
margin: auto;
}
</style>
</head>
<body>
<h3>CSS horizontaly vertically center Example</h3>
<div class="div1">
<p class="p1">Lorem ipsum dolor sit amet</p>
</div>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
Example (Horizontally and Vertically M2)
<!DOCTYPE html>
<html>
<head>
<title>CSS horizontaly vertically center Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<style>
.div1 {
border: 1px solid black;
height: 200px;
display: flex;
justify-content: center; /* Centers horizontally */
align-items: center; /* Centers vertically */
}
.p1 {
border: 1px solid red;
}
</style>
</head>
<body>
<h3>CSS horizontaly vertically center Example</h3>
<div class="div1">
<p class="p1">Lorem ipsum dolor sit amet</p>
</div>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.