Why is Image Centered?

HTML & CSS
1

I have a containing block around an image and the User’s Info like this…


<div class='userInfo'>
	<a href='/account/profile.php?user=DoubleDee'>
		<strong>DoubleDee</strong>
		<img id='onlineStatus' src='/images/online.jpg' width='10' alt='' /><br />
		<img class='noborder' src='/uploads/12345.jpg' width='100' alt='Member Photo' />
	</a>

With these Styles…


#boxComments .userInfo{
	float: left;
	width: 160px;
	padding: 10px 0px 0 0;
	font-size: 0.9em;
	text-align: center;
}

Why is my Photo getting centered with the Text?!

Apparently text-align: center; is doing it, but I don’t understand why?

This behavior is okay, for what is in the User Info section now, and actually works to my advantage since I do want everything centered, however, I want to move my “Flag Message” icon to this section from the Footer, and it is getting centered automatically which is not what I want!

So, how can I over-ride this centering behavior for the Red Flag image, but leave everything else as it is?

See attached for a better idea of what I’m describing…

Thanks,

Debbie

2

Inheritance. All the elements in your div inherent the positioning of that wrapper.

3

Set the flag to

{display: block; text-align: left;}
4

That was it.

Thanks Ralph!!

(It looks like I needed the display: block; to make it work…) :scratch:

Debbie