How do you center align an image with CSS?

HJ

HaydenJW

0 1
Asked
Viewed
166.5k times

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

Thanks in advance

-Hayden

add a comment
0

9 Answers

  • Votes
  • Oldest
  • Latest
TY

typhon

0 0
Answered
Updated

Are you talking vertical or horizontal?

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

add this to your css element

.element {
      text-align:center;
}

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

add a comment
0
HJ

HaydenJW

0 1
Answered
Updated

that works perfect, thanks

add a comment
0
HJ

HaydenJW

0 1
Answered
Updated

Wow, false alarm the picture wasn't working. With the page I am working with, here is my style sheet:

body.index {
    background: #3B6AA0 url('/waisanen13/cowboy_shooting_one_gun_md_wht_15037.gif') no-repeat
}

span.header1 {
    letter-spacing: 4px;
    font-size: 50;
    font-weight: bold
}

span.navigation {
    color: 663300;
    font-size: 30
}

a:link {
    color: navy;
    text-decoration: underline overline
}

a:visited {
    color: navy
}

a:hover {
    color: blue;
    text-decoration: underline overline
}

a:active {
    color: navy
}

a:link.navigation {
    color: navy;
    text-decoration: overline;
    font-size: 24
}

a:visited.navigation {
    color: navy;
    font-size: 24
}

a:hover.navigation {
    color: blue;
    text-decoration: underline overline;
    font-size: 24
}

a:active.navigation {
    color: navy;
    font-size: 24
}

iframe.indexbox {
    width: 100%;
    height: 700px
}

body.sub {
    background: #3B6AA0
}

img {
    background-color: #3B6AA0
}

span.updatetitle {
    color: navy;
    font-size: 30
}

span.update {
    color: navy;
    font-size: 14
}

hr.break {
    visibility: hidden;
}

sup.new {
    color: red
}

span.ticker {
    color: #E31230;
    text-decoration: underline
}

span.header5 {
    font-size: 20;
    font-weight: bold
}

span.gamefoot {
    color: navy;
    font-size: 18;
}

span.gamehead {
    color: navy;
    font-size: 23;
    letter-spacing: 5px;
    font-weight: bold;
    text-decoration: underline overline
}

img.car {
    height: 400;
}

div#car {
    text-align: center;
}

p.song {
    text-align: center;
    color: blue;
    font-size: 18
}

embed.hgame {
    height = 400
}

embed.pgame {
    height = 500
}

div#game {
    text-align: center;
}

The class of the picture is car.

add a comment
0
MS

Mas Sehguh

25 0
Answered
Updated

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.

add a comment
0
TY

typhon

0 0
Answered
Updated

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

img.car {
height: 400;
}
#main {
width:100%;
text-align:center;
}

And I added the content of your source inside a div

<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>

It centers it for me.

add a comment
0
HJ

HaydenJW

0 1
Answered
Updated

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

add a comment
0
TY

typhon

0 0
Answered
Updated

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.

add a comment
0
HJ

HaydenJW

0 1
Answered
Updated

excuse me, I used a div instead of a span, and a id instead of a class. Just had a brain fart.

add a comment
0
TP

TeknoPathetic

0 0
Answered
Updated

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.

add a comment
0