How to Center align Img in css?

  • HaydenJW
  • Novice
  • Novice
  • User avatar
  • Posts: 28
  • Loc: Rapid City, South Dakota

Post 3+ Months Ago

I was wondering how you would center align a img using css :?:

Thanks in advance

-Hayden
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • typhon
  • Guru
  • Guru
  • User avatar
  • Posts: 1294
  • Loc: Memphis, Tn

Post 3+ Months Ago

Are you talking vertical or horizontal?

If you want to center it the way the <center> tag did

add this to your css element

Code: [ Select ]
.element {
   text-align:center;
}
  1. .element {
  2.    text-align:center;
  3. }

if on the other hand you are wanting to have it in the middle of the screen vertically, thats a bit more tricky. You will need to play with the padding and margins to get it to do right. and that wont neccessarily solve it in all browsers
  • HaydenJW
  • Novice
  • Novice
  • User avatar
  • Posts: 28
  • Loc: Rapid City, South Dakota

Post 3+ Months Ago

that works perfect, thanks
  • HaydenJW
  • Novice
  • Novice
  • User avatar
  • Posts: 28
  • Loc: Rapid City, South Dakota

Post 3+ Months Ago

wow, false alarm the picture wasnt working

Here let me show you what im working with:
This pageis the actual page i am working with

This is my style sheet.
The class of the picture is car
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1853

Post 3+ Months Ago

I'm getting server errors in both places. Put text-align: center for the element containing the image, and that should be correct. In being rendered by a browser, an image is more or less equivalent to a single character, except that it has a different size than most characters, line breaking behavior is a bit different around images than characters, and the browser's bugs might be different.

text-align affects the alignment of the text contained by an element, not the alignment of an element itself.
  • typhon
  • Guru
  • Guru
  • User avatar
  • Posts: 1294
  • Loc: Memphis, Tn

Post 3+ Months Ago

OK so I played around a bit and noticed you didnt have a div at all. So I did this. I also killed somee of your code Ill paste from img.car down
Code: [ Select ]
img.car {
height: 400;
}
#main {
width:100%;
text-align:center;
}
  1. img.car {
  2. height: 400;
  3. }
  4. #main {
  5. width:100%;
  6. text-align:center;
  7. }


And I added the content of your source inside a div

Code: [ Select ]
<body class=sub>
<div id ="main">
<img src=http://www.freewebs.com/waisanen14/Picscarcrash/car.jpg class="car">
</div>
<!-- --><script type="text/javascript" src="/i.js"></script></body>
  1. <body class=sub>
  2. <div id ="main">
  3. <img src=http://www.freewebs.com/waisanen14/Picscarcrash/car.jpg class="car">
  4. </div>
  5. <!-- --><script type="text/javascript" src="/i.js"></script></body>


It centers it for me.
  • HaydenJW
  • Novice
  • Novice
  • User avatar
  • Posts: 28
  • Loc: Rapid City, South Dakota

Post 3+ Months Ago

hmm weird, i kindve went off yours, but I just used a div instead of a span and an id instead of a class and it worked perfect.

Thanks all
  • typhon
  • Guru
  • Guru
  • User avatar
  • Posts: 1294
  • Loc: Memphis, Tn

Post 3+ Months Ago

HaydenJW wrote:
hmm weird, i kindve went off yours, but I just used a div instead of a span and an id instead of a class and it worked perfect.

Thanks all


What do you mean? What I gave you was a div with an id I didnt have any span nor class.
  • HaydenJW
  • Novice
  • Novice
  • User avatar
  • Posts: 28
  • Loc: Rapid City, South Dakota

Post 3+ Months Ago

excuse me, I used a div instead of a span, and a id instead of a class. Just had a brain fart.
  • TeknoPathetic
  • Newbie
  • Newbie
  • TeknoPathetic
  • Posts: 11
  • Loc: The Matrix

Post 3+ Months Ago

why dont u just put it inside:
div.pictureArea{position:relative; margin-left:auto; margin-right:auto;}

So, then it would center WHEREVER you put it. and you also wouldnt have to worry about heights.

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 45 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.