-1

Below is the snippet:

I don't know what's wrong with it. I even checked other sources. nothing has helped.

<!DOCTYPE html>
<html>
<body>

<h1><center><font face="Narkisim" color="maroon">Welcome to Preeyah Museum</font></center></h1>

<h2><center><font face="Narkisim" color="black">World of South Indian Food</font></center></h2>

<img src="southIndiaMap.jpg" width="300" height="300" alt="South India States" align="center">
Ajith
  • 1,447
  • 2
  • 17
  • 31
Preeyah
  • 363
  • 3
  • 16
  • 42

4 Answers4

1

note <center> tag and <font> tag are deprecated in html 5

set text-align: center for body or put image to a div and give to div style text-align: center

you can try other way for example : 

<!DOCTYPE html>
<html>
<body>

  <h1 style="text-align:center; font-family: Narkisim; color:maroon;">Welcome to Preeyah Museum</h1>

  <h2 style="text-align:center; font-family: Narkisim; color:black;">World of South Indian Food</h2>

  <div style="text-align:center">
    <img src="southIndiaMap.jpg" width="300" height="300" alt="South India States">
  </div>


<body

exists many way for this, for example you can set style for element in css file or set in style code tag and put it to tag top of tag

Ramin eghbalian
  • 2,348
  • 1
  • 16
  • 36
0

I think this is what you have to do to center it, use 

img { 
  margin: 0 auto;
  display: block;
}

The following snippet works:

.container img {
  display: block;
  margin: 0 auto;
}
<!DOCTYPE html>
<html>
<body>

<h1><center><font face="Narkisim" color="maroon">Welcome to Preeyah Museum</font></center></h1>

<h2><center><font face="Narkisim" color="black">World of South Indian Food</font></center></h2>

<div class="container">
<img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823__480.jpg" width="300" height="300" alt="South India States" align="center">
</div>
ROOT
  • 11,363
  • 5
  • 30
  • 45
0

The image may align it in the center of itself but there is space next to the image that is not part of the image.

Try adding the attribute style="margin-left:auto;margin-right:auto;" to the image.

As far as I know, you can also add the tags margin-left="auto" margin-right="auto".

This sets the space to the right and the left to be equal.

By the way, it is a good pattern to move everything related to design to external css files.

dan1st
  • 12,568
  • 8
  • 34
  • 67
0

Try adding a style within the img tag.

<!DOCTYPE html>
<html>
<body>
    <h1><center><font face="Narkisim" color="maroon">Welcome to Preeyah Museum</font></center></h1>
    <h2><center><font face="Narkisim" color="black">>World of South Indian Food</font></center></h2>
    <img  style="display: block; margin-left: auto; margin-right: auto; " src="southIndiaMap.jpg" height="300" width="300" alt="South India States" align="center">
</body>
</html>
dEBA M
  • 457
  • 5
  • 19