How to center text of <p> tag html using CSS?
Dung Do Tien Apr 26 2020 427
Now I have an image and a caption text guideline for the image below this image, I want to center this text compare with of width that image. How can I do it?
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div>
<img style="max-width:400px" src="https://www.nationalgeographic.com/content/dam/ngdotcom/rights-exempt/maps/world-classic-2018-banner-clip-72.adapt.1900.1.jpg" />
<p>This is map of the world</p>
</div>
</body>
</html>
I need any suggestions from you.
Have 1 answer(s) found.
- S1
Sandeep Kumar Apr 26 2020
Using text-align: center
You can use this property in CSS to the center text of any element tag of Html.
You also use it to center a div tag or block tag in some case ( if that block tag not set float property).
In your case, you should let <img> tag inside the <p> tag because you want <img> tag located on a line.
And below is your code should do:
<div> <p style="text-align: center"> <img style="max-width:400px" src="https://www.nationalgeographic.com/content/dam/ngdotcom/rights-exempt/maps/world-classic-2018-banner-clip-72.adapt.1900.1.jpg" /> </p> <p style="text-align: center">This is map of the world</p> </div>You can see a demo here.
* Type maximum 2000 characters.
* All comments have to wait approved before display.
* Please polite comment and respect questions and answers of others.