How to center text of <p> tag html using CSS?

Dung Do Tien Apr 26 2020 437

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>

How to center text of <p> tag html using CSS?

I need any suggestions from you.

Have 1 answer(s) found.
  • S

    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.

Leave An Answer
* NOTE: You need Login before leave an answer

* Type maximum 2000 characters.

* All comments have to wait approved before display.

* Please polite comment and respect questions and answers of others.

Popular Tips

X Close