5 Replies - 1258 Views - Last Post: 26 February 2012 - 11:16 PM

#1 AOM_Set   User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 151
  • Joined: 18-December 10

Css and html

Posted 25 February 2012 - 05:38 AM

Hi.

I am trying to center an image using css. The image gets centered alright according to the left and right padding, but the padding between top and bottom are not the same. For some reason the image wanna float on top. Any advice on what I am doing wrong?
Here is my html code, along with the css code.
<div>
   <img class="centerImage" src="cls500.jpg" alt="" />
</div>


img.centerImage{
	display: block;	
	margin-left: auto;
	margin-right: auto;
	width: 60em;
	height: 40em;
}



Thanks in advance

Is This A Good Question/Topic? 0
  • +

Replies To: Css and html

#2 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4288
  • View blog
  • Posts: 13,594
  • Joined: 08-June 10

Re: Css and html

Posted 25 February 2012 - 06:03 AM

View PostAOM_Set, on 25 February 2012 - 01:38 PM, said:

but the padding between top and bottom are not the same. For some reason the image wanna float on top. Any advice on what I am doing wrong?

I see no definition for padding on either <div> or <img> and in that case, elements tend to start at the top.
Was This Post Helpful? 0
  • +
  • -

#3 AOM_Set   User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 151
  • Joined: 18-December 10

Re: Css and html

Posted 25 February 2012 - 06:19 AM

I have tried different options, but the image doesnt move at all.
At the parent div I have this css code:
* {margin: 0px; padding: 0px; }


And at the div that has the image that I am trying to center, I have tried different style of padding, which should overwrite the css code above, but nothing seems to work.

Can someone experienced with css and html please show, I'd be very greatful. This is no homework, it's just my own project, trying to create a site.
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4288
  • View blog
  • Posts: 13,594
  • Joined: 08-June 10

Re: Css and html

Posted 25 February 2012 - 06:21 AM

it would help to see the page concerned.
Was This Post Helpful? 0
  • +
  • -

#5 AOM_Set   User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 151
  • Joined: 18-December 10

Re: Css and html

Posted 25 February 2012 - 06:39 AM

I have added an example image.

You see that the car image is centered, but it wants to stay on top, instead of beeing in center. I want so that it should stay centered, no matter what size the uploaded image has

Attached image(s)

  • Attached Image

Was This Post Helpful? 0
  • +
  • -

#6 hiddenghost   User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Re: Css and html

Posted 26 February 2012 - 11:16 PM

This will give you an approximation of what you want.
You'll have to fiddle with the dimensions of the margin and the positioning, but it will kinda work.

<html>
<head>
<style type="text/css">
#push{
position: relative;
}
#image_box{
	position: absolute;
	top: 50%;
	left: 50%;
	height: 30%;
	width: 50%;
	margin: 10% 10% -10% -5%;
}
#image{
 height: 150px;
}
</style>
</head>
<body>
<div id="push">
<div id="image_box">
<img id="image" src="cls500.jpg">
</div>
</div>

</body>
</html>


Was This Post Helpful? 1
  • +
  • -

Page 1 of 1