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

Dung Do Tien Apr 26 2020 769

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> 
  <title>Title of the document</title>
       <img style="max-width:400px" src="" />
       <p>This is map of the world</p>

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:

       <p style="text-align: center">
         <img style="max-width:400px" src="" />
       <p style="text-align: center">This is map of the world</p>

    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