I am trying to figure out how to center images inside posts at my blog: http://www.wump.info/wumpblog
The css code I'm trying to use:
.storycontent img {
border: solid 5px #000000 ;
align: center ;
}
For some reason this isn't working. I know this is a basic question but after quite a bit of experimenting and google-searching I'm still not what the answer to this is.
centering images (14 posts)
-
-
.storycontent img {
border: solid 5px #000000 ;
text-align: center ;
}
That should work.
or
<p align="center">
<img src="grape.gif" alt="" />
will work too. -
Podz,
I tried each solution you gave me. The first solution didn't really change anything at all (though I'm wondering if its centering the picture for the entire page, rather than inside the post box?).
The second solution creates a white gap (above the image) similar to what I was getting when I was trying to use < center > and < / center > -
Turnip
Posted 5 years ago #There is no property called "align" in CSS, as Podz said, the "text-align" property should work for you. That *should* work.
The method using creates the gap above the image because it is a paragraph. Paragraphs have a margin above them (by default) for spacing. -
By the way, the <center> tag is supposed not to be used. And it's only in IE that the text-align: center won't work properly.
-
I appreciate the tips. I've tried it again and it isn't working in Mozilla. I'm guessing I've got other code in there that is somehow interfering or that I'm missing something obvious.
-
.storycontent p img {
border: solid 5px #000000 ;
text-align: center ;
}
Try that ?
Also, for testing only, change the border colour so you can see what is being applied and where.
Drop that css at the bottom of your css, not the top. -
Podz,
That p isn't changing it either. I'll try changing that border color just to see what happens. -
Podz,
I changed the color of the border from (code #) 000000 to fff and it changed to white. So that area of the code is being applied. By the way, before trying any of these things I did drop that code to the bottom of the css as well. -
It's more complicated.... make #content have a background-color of #ff0000
Scroll around and things aren't quite how they should be..... -
Podz, it looked like my host was having some problems but now finally I was able to make and save some changes and I can see what you're talking about... there's a larger area that has been invisible due to its color. Do I need to get rid of that area somehow? I'm not entirely sure what impact that has on the overall picture or how to work with it.
-
Beel, splitting up those two elements as you suggested worked! Thanks! I also see that its working in both IE and Mozilla.
-
If all you did was set text-align:center for p, be advised that any text in a post will be centered also (duh!).
-
asknight
Posted 5 years ago #here's what I do:
<div style="margin:auto; width:90%(or 432px, etc - should be at least as wide as the image it contains); text-align:center; border:1px dotted blue"> <img src="/images/groovyimage.png " alt="don't forget the alt" /></div>
Topic Closed
This topic has been closed to new replies.
