Trying to center submit buttons within form - help? 1

[BobMCT]

Gents;

Among other issues I've been trying to resolve this issue for several weeks now. In several of my forms for a particular site I have submit buttons that I wish to have centered in the area where they appear. I have approached this with an attribute of "center".

I've included snippets of the html output below showing how I am defining classes and the definition of those classes appears below that.

Can someone please take a look at my code and definitions and hopefully advise why my buttons are most always appearing left justified? BTW -the .main class contains "text-align: left;" but that should be overridden by the spans. Am I correct?

Thanks for any/all recommendations/suggestions.


<div class="main">

<h4>Please Login</h4>

<div class="prompt30">

<fieldset><legend>Please login</legend>

<form name="login" action="xxx.php?s=1&t=1" method="post">

<span class="bold">Username:</span><br />

<input name="userName" type="text" value="" /><br />

<span class="bold">Password:</span><br />

<input name="passWord" type="password" /><br /><br />

<span class="eMsg">&nbsp;</span><br /><br />

<span class="center">

<input class="submit" name="btn1" type="submit"
value="login" />

<input class="submit" name="btn1" type="submit" value="forgot password" />

<input class="submit" name="btn1" type="submit" value="subscribe!" />

</span>

</form>

</fieldset>

</div>

</div>


/* Force Font Bold */
.bold {
font-weight: bold;
}
/* Force Alignment Centered */
.center {
text-align: center;
}
.prompt30 {
text-align: left;
width: 30em;
margin-left: auto;
margin-right: auto;
}
.red {
color: #ff0000;
font-weight: bold;
}
.eMsg {
color: #ff0000;
font-weight: bold;
text-align: center;
}

 

[vacunita]

Because that's what you are telling them to do.

You are telling them to be centered inside a span. However that span is being left justified by the text-align:left of its parent the prompt30 div. .

But because the span is not 100% of its parent the buttons inside don't look centered in regards to prompt30.

They are however centered in regards to the span.

 ___________________ 
|                   |
|  _________        | 
| |  _   _  |       |
| | |_| |_| |       |
| |_________|       |
|___________________|

The easiest way to fix this is to change the span to a div so it takes up 100% of its parent's width and then akes the buttons looked centered to that.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[BobMCT]

Thanks, vacunita;

That makes sense. To address what you suggested I modified the class ".center" to include "width: 100%;" thinking that it would "assume" the width of its parent.

I must have assumed incorrectly because even though I can see the code (view source & css) it is still not centered in the parent.

Any other pointers/ideas?

 

[vacunita]

Spans just don't work that way. They are inline elements. so they are only as wide as their content.

If you want to keep the span, give it a display:block; so it can assume the 100% width to fit its parent.

Or as I said before change it to a DIV.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[BobMCT]

Thanks Phil/Vacunita;

That did the trick. As we all see, each day is a new learning experience!

B