How to Center Text and Image by HTML and CSS
How to Center Text and Image With CSS
When you create a website. Then, there are many situations comes where you want to align your text or image in the center of the div and other block elements. Centering the image and text is an easy task for someone and it becomes difficult for the other one. So don’t worry here I am going to share the CSS techniques to keep the text and images in the center.
Centering Text
To keep a single text or lines of text in center is a common task in website designing. You can use the text-align:center property of CSS for that.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p> <h2>Webrpoint</h2> CSS- P{ text-align: center; } H2{ text-align: center; }
Center Text Horizontally and Vertically
<div> <h2>i am heading 2</h2> </div> CSS - div{ height:200px; justify-content:center; display:flex; align-items:center; }
Centering Image
One of the common questions is how to center an image. Here I am going to share the techniques to place your image in the center of div and paragraph.
<p> <img decoding="async" src="img1.jpg"/> </p> CSS - p{ text-align:center; } NOW INSIDE DIV <div> <img decoding="async" src="dog.jpeg" width="20%"/> </div> CSS - img{ display: block; margin-left: auto; margin-right: auto; }
Centering Image Horizontally and Vertically
Using FLEX Property
<div>
<img decoding="async" src="img1.jpg"/>
</div>
CSS -
div{
height:400px;
display:flex;
justify-content:center;
align-items:center;
}
Centering Image & Text Horizontally and Vertically in a Single Div
Using FLEX Property
<div>
<h2>i am heading 2</h2>
<img decoding="async" src="img1.jpg" />
</div>
CSS -
div{
height:400px;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
}
Using FLEX Property<div> <h2>i am heading 2</h2> <img decoding="async" src="img1.jpg" /> </div> CSS - div{ height:400px; display:flex; justify-content:center; align-items:center; flex-direction:column; }
