I was wondering how you would center align a img using css ❓
Thanks in advance
-Hayden
add a comment
- Asked
- Viewed
- 167.4k times
0
9 Answers
-
Votes
-
Oldest
-
Latest
- 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
- Answered
- Updated
that works perfect, thanks
add a comment
0
- 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
- 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
- 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
- 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
- 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
- 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
- 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