How to align items to the center using Flexbox
Aligning items to the center using Flexbox serves as an effective technique to enhance the layout and presentation of web content. In the following illustration, the text "Center align" is center-aligned with the educative logo.
The item can represent any element we aim to align using Flexbox. In this Answer, we will align three items with Flexbox including buttons, text blocks, and images.
Align a button
Use the following steps to center align a button in a div container.
- Create a
divwith the classflex-container. - Insert the
buttontag within adiv. - In the CSS for the
div, setjustify-contenttocenter. - Set
align-itemstocenter. - Set
displaytoflex.
The button and all the contents within the div should now be center-aligned.
Below is a working code example that can help you better understand the concept:
Align a text
To align a text, we can use the following steps to center align a text.
- Create a
divwith the classflex-container. - Insert the
ptag within adiv. You can use any other relevant tag for text. - In the CSS for the
div, setjustify-contenttocenter. - Set
align-itemstocenter. - Set
displaytoflex.
Below is a working code example that can help you better understand the concept:
Align an image
We can follow the same steps as for text and button to center-align the image. We need to use the <img> tag within a div to display the image.
In summary, learning how to align items to the center using Flexbox is a great way for beginners to make their web designs look better. Flexbox helps you easily center elements like text, images, and buttons on your webpage, making it more visually appealing
Free Resources