Examples of aligning block elements to center using CSS
1. Center block elements using margin property:
We need to specify the margin from left and right such that it looks centered. We do not need to do this manually, we have one property value “auto” which will automatically set the margin such that our block element is placed in the center. Use the below CSS property to center your block element.
margin: auto
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta http-equiv = "X-UA-Compatible" content = "IE=edge" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < style > h2, p { text-align: center; } .myblock { margin: auto; border: 2px solid red; width: fit-content; padding: 15px; text-align: center; background-color: lightyellow; } header { font-size: 40px; background-color: lightgreen; margin: auto; width: fit-content; } .myinline { padding: 10px; border: 2px solid blue; } .holder { text-align: center; } </ style > </ head > < body > < header >hello</ header > < div class = "myblock" > div who has default display : block </ div > < div class = "holder" > < div style = "display: inline-block" class = "myinline" > inline block paragraph 1 </ div > < div style = "display: inline-block" class = "myinline" > inline block paragraph 2 </ div > </ div > </ body > </ html > |
Output:
2. Centering Element Using display block Property:
We have one image that has some space around it, so by default the non-block element will come next to the img tag and not on the next line. After setting the “display: block” property, we can make our image to block element. It can be centered using “margin: auto” property.
Note: The body tag has been set to the “text-align: center” property. We know that it is not affecting the block elements.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta http-equiv = "X-UA-Compatible" content = "IE=edge" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < style > header { font-size: 20px; margin: auto; width: 30%; background-color: lightgreen; margin-bottom: 10px; } p { display: inline-block; } img { display: block; margin: auto; } </ style > </ head > < body > < header > centering image using display: block </ header > < img src = "https://media.w3wiki.org/wp-content/uploads/20210810104012/geeksimage.png" alt = "image here" width = "500" height = "400" /> < p > paragraph came to the new line even if it is inline, because the img is set to block </ p > </ body > </ html > |
Output:
How to align block elements to center using CSS ?
The “blocks” are known for taking full line space, forcing other elements to start on a new line. In other words, they have a width of 100% of the webpage or container holding the block. In this article, we are going to see how to block elements that usually behave and how to center them using CSS.
Table of Content
- Block Elements Behaviour
- How to center block elements
- Examples of aligning block elements to center using CSS
Contact Us