This content originally appeared on DEV Community and was authored by Elijah Trillionz
Center aligning items has being a much-discussed topic in CSS. Beginners and sometimes professionals often find themselves googling this topic when they get stuck while trying to center align texts or elements in CSS.
From my experience, center aligning has never been a problem to me since I saw a cheat in a YouTube video.
Now don't be quick to go to YouTube to search "cheat in aligning items to the center".
You are not going to find what I found that way. I found these cheat between the lines of this video. The YouTuber may probably not recall they mentioned something like that.
From this video, I discovered that center aligning items in CSS depends plainly on the
- HTML element to be centered.
- Parent element of the element to be centered.
What type of element are you center aligning? Is it block or inline?
Which element is to be styled when center aligning a child element, the parent element or the child element itself?
What are the already declared styles of these elements (parent and child)? That is if there are any.
There are different ways to center align texts and elements in CSS, but not all of it will work for all elements, for example
One of the common ways to align items to the center is text-align: center;. Now try this CSS declaration on a div element and then a span element.
You would notice the span element doesn't move to the center, this is because of the type of element.
Now try adding display: block; text-align: center; on that span element.
What you would notice is that it successfully moved to the center. Am sure you are now curious to know why, but before then I believe you might be interested in 20+ Places to Learn Coding for Free
.
Ways to Center Align items in CSS.
Before I list them, there is an uncommon way maybe common that developers use to center align items I.e with padding.
I don't do that and am not going to state it here because you wouldn't need it.
1. text-align - Center Align Texts
The text-align: center; is a very common way to center align texts horizontally.
In this case, we align a text to the center of a parent element.
So it basically doesn't matter the width of that element (the parent element now), the text inside will move absolutely to the center of that element.
Here is something about text-align, it aligns every text in that element. Doesn't matter if the text is inside another element.
For example,
HTML
<div class="parent">Hello World</div>
CSS
.parent {
text-align: center;
}
If the text in the div is inside another block element, e.g a
element. It will still center align the text
HTML
<div class="parent">
<p class="child">Hello World</p>
</div>
CSS
.parent {
text-align: center;
}
.child {
border: 1px solid green;
}
Result
The above is center aligning a text, with the text-align property we can also center align an element. But this element must be an inline element.
HTML
<div class="parent">
<span class="child">Hello World</span>
</div>
CSS
.parent {
text-align: center;
border: 2px solid red;
}
.child {
border: 4px solid green;
}
Result
Note: We can't center align texts in an inline element.
This property can only be used on a block element. It can't work on an inline element because the text in an inline element is already taking up the full width and height of the element. So where will we be centering it to?
HTML
<span class="parent">
Hello World
</span>
CSS
.parent {
text-align: center;
border: 2px solid red;
}
Result
If the text above is wrapped in a block element, it will align to the center but it will have a negative impact on the parent element. So don't do it.
Nonetheless, we can still center align inline elements to the center of a parent element (which has to be a block element) as shown above.
In a nutshell, a block element can use the text-align property to horizontally center align any text or inline elements inside of it to its center.
You may say, what if I want to vertically align the text to the center? Then I'd say use the next tip.
Hey, since you are reading this, I figured you might be interested in knowing the requirements to get you a cheap laptop for coding.
2. Margin - center align elements.
The margin: 0 auto; or margin: auto; declaration will horizontally align an element to the center of a parent element.
This property is used on the child element. Recall that the child element is what we intend to align to the center of a parent element.
HTML
<div class="parent">
<p class="child">Hello World</p>
</div>
CSS
.parent {
border: 2px solid red;
}
.child {
width: 200px;
margin: auto; /* or margin: 0 auto */
border: 4px solid green;
}
Result
We reduced the width of the child element to 200px to see the effect of the margin: auto; effect.
Furthermore, the element to be aligned to the center depends on the parent element. And for this to work it also depends on the type of element the parent and child element is.
The child element must be a block element.
And the parent element must be a block element for the child to align to its center.
If the parent element is not a block element, the child element will align to the center of the next parent element (that is a block element).
HTML
<body>
<span class="parent">
<p class="child">Hello World</p>
</span>
</body>
CSS
.parent {
border: 2px solid red;
}
.child {
width: 200px;
margin: auto; /* or margin: 0 auto */
border: 4px solid green;
}
Result
In the code above, the next parent element is the body element which is a block element.
What we have been doing is horizontally aligning items to the center, with the margin property we can also align vertically.
HTML
<body>
<span class="parent">
<p class="child">Hello World</p>
</span>
</body>
CSS
.parent {
border: 2px solid red;
}
.child {
width: 200px;
margin: 100px auto; /* moves 100px from the top and bottom of the parent element */
border: 4px solid green;
}
Result
Note: The above example will no longer work as expected if a height is set for the parent element.
Setting a height for the child only will still perfectly center align the element horizontally and vertically.
In a nutshell, a child element (which is a block element) can use the margin property to vertically and mostly horizontally center align elements to the center of a parent element (that should be a block element).
Again you may say, what if I want to set a height for the parent element and at the same time center align the child element to its center? I'd say use the next tip.
Quick Tip on Centering Inline Elements.
Just in case you are wondering how you would center align inline elements with the text-align property and the margin property, it is as simple as setting it to a block element with the display property. i.e
.some-inline-element {
display: block;
}
3. Flexbox - Center aligns elements and texts.
Flexbox is one of the solid ways to center align an element or a text, but if your HTML elements are not well positioned, you may end up being discouraged.
The display: flex; declaration works on both a default block and inline element as it changes that element to a flexbox.
If you are not familiar with Flexbox I recommend you go through a tutorial, it's a bit wide so we won't be explaining every aspect of it in this article.
Center Align texts with Flexbox.
A flexbox element can horizontally align a text in it to its center.
But you should note that the width of this element - the flexbox element (that contains the text) is absolute to the width of the nearest parent element (that is a block element).
HTML
<body>
<div class="parent">Hello World</div>
</body>
CSS
body {
width: 50%; /* will take up 50% of device's screen */
border: 2px solid red;
}
.parent {
display: flex;
justify-content: center; /* used to center align horizontally */
}
Result
To make it clear, when display: flex; is used on any type of element:
First it converts that element to a flexbox element.
The text inside that flexbox element is aligned to the center of the flex element with the
justify-content: center;property and valueFinally the width of the flexbox element is dependent on the width of its nearest parent element that is a block element. So if the width of its parent element is 50% of the device's width, the flexbox element is going to be 100% of the parent's 50% width. This happens by default.
Hey there, how would you like to see me make a NoSQL Database clone with JavaScript Classes?
Vertically align texts to the center using flexbox.
To align vertically, you can simply specify the height of the flex element, and then use the align-items property to align the text vertically to the center.
HTML
<body>
<div class="parent">Hello World</div>
</body>
CSS
body {
width: 50%; /* will take up 50% of device's screen */
border: 2px solid red;
}
.parent {
height: 300px
display: flex;
justify-content: center; /* used to center align horizontally */
align-items: center; /* used to center align vertically */
}
Result
By default, the height of a flexbox element is not dependent/inherited on/from the parent element. You can make it inherit by using height:inherit on the flexbox element.
Center Align Elements with Flexbox
When display: flex; is used on an element, every child element will be converted to an inline-block element.
HTML
<body>
<div class="parent">
<span class="child">Hey World 1</span>
<div class="child">Hey World 2</div>
<span class="child">Hey World 3</span>
</div>
</body>
CSS
.parent {
display: flex;
justify-content: center;
border: 2px solid red;
}
.child {
padding: 100px 22px;
margin: 3px;
border: 2px solid green;
}
Result
When center aligning multiple elements to the center of a flex element, wrap these multiple elements with any element (block or inline).
HTML
<body>
<div class="parent">
<div class="child-wrapper">
<span class="child">Hey World 1</span>
<div class="child">Hey World 2</div>
<span class="child">Hey World 3</span>
</div>
</div>
</body>
CSS
.parent {
display: flex;
justify-content: center;
border: 2px solid red;
}
.child {
margin: 3px;
border: 2px solid green;
}
Result
Without wrapping, you would have the elements horizontally stacked together and still aligned to the center i.e
HTML
<body>
<div class="parent">
<span class="child">Hey World 1</span>
<div class="child">Hey World 2</div>
<span class="child">Hey World 3</span>
</div>
</body>
CSS
.parent {
display: flex;
justify-content: center;
border: 2px solid red;
}
.child {
margin: 3px;
border: 2px solid green;
}
Result
Again by default, the width of the flexbox element is dependent on its parent element that is a block element. While the height isn't.
To vertically center align the elements in the flexbox element, we will specify a height for the flexbox element along with the align-items property
HTML
<body>
<div class="parent">
<span class="child">Hey World 1</span>
<div class="child">Hey World 2</div>
<span class="child">Hey World 3</span>
</div>
</body>
CSS
.parent {
height: 300px;
display: flex;
justify-content: center;
border: 2px solid red;
}
.child {
margin: 3px;
border: 2px solid green;
}
Result
You can also inherit the height of the parent element of the flexbox element with height: inherit; declared for the flexbox element.
In a nutshell, an inline or block element (as the parent element) can use the display property to align a text or element vertically and horizontally to its center.
4. Position and Transform - Center Align Elements and Texts.
The position property is also a great way to center align elements. I mostly use it when am making a fixed element, or a dropdown.
In this format, you would need to practically style the parent element and the child element - will be placed in the middle of the parent element.
The parent element will need to show in your CSS that it is the element you want the child element to be in the middle of, and you show this by setting the position property of the parent element to fixed or relative.
HTML
<body>
<div class="parent">
<some-element>Some text</some-element>
</div>
</body>
CSS
.parent {
position: relative;
}
The child element will need to be set absolute to the position of the parent element. What this means is that the width, height, position of the child element is now dependent on the parent element.
HTML
<body>
<div class="parent">
<p class="child">Hello World</p>
</div>
</body>
CSS
.parent {
position: relative;
}
.child {
position: absolute;
}
Now let's try to center align it. We use the position property as well as the transform property on the child element to do this:
HTML
<body>
<div class="parent">
<p class="child">Hello World</p>
</div>
</body>
CSS
.parent {
position: relative;
height: 100px;
border: 2px solid red;
}
.child {
position: absolute;
left: 50%; /* adjusts the element 50% from the left */
transform: translateX(-50%); /* horizontally re-adjusts the element to the center */
}
Result
If you're familiar with the translate value, you would know that the first parameter positions element horizontally and the other vertically.
HTML
<body>
<div class="parent">
<p class="child">Hello World</p>
</div>
</body>
CSS
.parent {
position: relative;
height: 100px;
border: 2px solid red;
}
.child {
position: absolute;
left: 50%; /* adjusts the element 50% from the left */
top: 50%; /* adjusts the element 50% from the top */
transform: translate(-50%, -50%); /* horizontally & vertically re-adjusts the element to the center */
}
Result
And that's all, the four indomitable ways to center align elements or texts vertically or horizontally in CSS.
Use-Case
Let's practically use this on a webpage. In this section, we will try each case (listed above) to try and center align an element, which will contain a text.
NOTE: Have in mind that wherever I specify or may have specified elements in this article, it actually includes all elements like images, input.
You should also have in mind that the examples where we stated why some elements would not center align because it is an inline element. And I have said the solution is to not make it inline.
Let's make something...
Say we have a header that we want to be fixed on the top of our webpage, and in this header, there is going to be an h1 element that will contain the name of our webpage.
<header>
<h1>Dashboard</h1>
</header>
Now what we want to do is center align the h1 element. How would you do this?
First, let's make the header fixed and add a border.
header {
position: fixed;
border: 4px solid orange;
}
Now let's center align the text because the parent element is fixed, I usually would just make the h1 absolute and then center align it with the transform property.
But for the sake of this tutorial, let's try all of the listed tips.
1. Try using the center-align property on the parent element (the header element):
I would try this because the parent element is a block element and the child element is a block element that contains a text we want to center align.
What do you think? Is it gonna work? Of course, it would. If you try it now, it will work but won't reflect.
This is because by default when we specify an element to be of position fixed, the element's width is reduced to the width of the text in it.
header {
position: fixed;
border: 4px solid orange;
text-align: center;
}
Result
What we have to do now is give it a full width
header {
position: fixed;
right: 0;
left: 0;
border: 4px solid orange;
text-align: center;
}
Result
Now it works as expected.
You might be interested in How to Become a Web Developer in 2021.
2. Try using the margin property on the h1 element:
I would try this because it meets the condition of the margin property and that is for the parent element to be block and the child element to be a block element.
header {
position: fixed;
right: 0;
left: 0;
border: 4px solid orange;
}
h1 {
margin: 0 auto;
}
Though our webpage satisfies the condition, it still doesn't work and that is probably because of the position property.
3. Try using flexbox on the parent element (the header element):
header {
position: fixed;
right: 0;
left: 0;
border: 4px solid orange;
display: flex;
justify-content: center;
}
Result
This would work fine as expected.
4. Try using the position and transform properties on the h1 element:
header {
position: fixed;
right: 0;
left: 0;
border: 4px solid orange;
height: 80px;
}
h1 {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Result
It works fine because the parent element already shows it is the parent element and so the child element just needs to be moved to the center of its father (or mother).
This is a very basic webpage, complex pages or sections may not always end like this - having three cases work perfectly.
But no matter the case, try to always think like this; does it satisfy the text-align condition, if it doesn't move to the next. Like that.
So instead of trying it first to see if it would center align, you can simply use your cerebrum to tell if it's going to work.
Conclusion
With this article, center aligning elements or texts in CSS can and should never be a problem for you. What I'd recommend you do now is practice, you can practice not just from scratch but from problems.
Go to GitHub, projects where frameworks were used to center align, use these principles on it.
Alright, leave a comment for me if you want to correct me, tell me something. If you enjoyed this article please share with as many CSS folks as you can, I believe they will learn one or two things from here.
Also if you wanna support my blogging journey, you want me to keep posting, you can support me by becoming a patron or you can buy me a coffee. Thank you and have a great time styling.
This content originally appeared on DEV Community and was authored by Elijah Trillionz
Elijah Trillionz | Sciencx (2021-06-13T18:12:50+00:00) How to Center Align Items in CSS with 4 Solid Methods.. Retrieved from https://www.scien.cx/2021/06/13/how-to-center-align-items-in-css-with-4-solid-methods/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.