CODEWITHSUNDEEP
htmlcssimage
Ana G
Ana G

Reputation: 17

Centering an Image

So this is probably an easy answer, but my image which is supposed to be sitting in the middle of the page is slightly off and it's irritating me a lot.

HTML:

</section>

<section class="img_section">
<div>
  <img src="images/menu.jpg" alt="menu" align="center"> 


  </div>
</section>

CSS:

img section{
	float:center;
	text-align:center;
}

I've tried removing float, and taking it out of a section entirely, but it won't budge.

Any help would be amazing

Upvotes: 0

Views: 101

Answers (5)

LorDex
LorDex

Reputation: 2636

there's no such thing as float: center; also img section doesn't style image within section. you could try either: 1:

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

2:

section div {
text-align: center;
}
section div img {
display: inline-block;
}

depending on your other styles

Upvotes: 2

Evan
Evan

Reputation: 41

I like to use 

margin: 0 auto;

for centering

Upvotes: 0

Chico3001
Chico3001

Reputation: 1963

try in css:

.img_section img{
    text-align:center;
}

html:

<section class="img_section">
    <img src="images/menu.jpg" alt="menu" align="center">
</section>

Upvotes: 0

Aravind
Aravind

Reputation: 41533

this is much more simple. just include center tag as

<center>
  <section>
   <div>
        <img src="images/menu.jpg" alt="menu" align="center"> 
   </div>
  </section>
</center>

Upvotes: 0

Yash Jain
Yash Jain

Reputation: 1

This is simple to answer.

#div1 {
  text-align: center;
}
</section>

<section class="img_section">
  <div id="div1">
    <img src="images/menu.jpg" alt="menu" align="center">
   </div>
</section>

The text-align: center; property is going to make all the elements inside the div centered. Also, it is better if you select the div with a specific class or ID. This is going to go on all div elements on the page.

Upvotes: 1

Related Questions