How to Center Align a Cell but Align Text inside to the Left

I've got the following

                
<table border="0" cellpadding="4" cellspacing="0" width="95%">
<tr>
	<td colspan="4" height="10" width="95%"></td>
</tr>
<tr>
<td align="center" width="95%">
	<span>
		<span style="float:left; width:200px;">
			<span style="font-size:larger; text-align:left;">Search Alphabetically:</span><br />
			<span><asp:DropDownList ID="ddlAlpha" AutoPostBack="true" runat="server" Width="150"></asp:DropDownList></span>                 
		</span>
		<span style="float:left; width:275px;">
			<span style="font-size:larger; text-align:left;">Search By Code Name:</span><br />
			<span><asp:TextBox ID="strSearchString" runat="server" CssClass="textbox" Width="100"></asp:TextBox>
				<asp:Button ID="btnSearch" runat="server" Text="GO" CssClass="ButtonMedium" CausesValidation="false" />
			</span>     
		</span>
		<span style="float:left; width:200px; text-align:left;">
			<span style="font-size:larger">Search by Route:</span><br />
			<span><asp:DropDownList ID="ddlVendorID" AutoPostBack="true" runat="server" Width="150"></asp:DropDownList></span>          
		</span>
		<span style="float:left; width:200px; text-align:left;">
			<span style="font-size:larger">Search by Marketsource:</span><br />
			<span><asp:DropDownList ID="ddlVenueID" AutoPostBack="true" runat="server" Width="150"></asp:DropDownList></span>          
		</span>
	</span>
</td>
</tr>
</table>

Open in new window

I know, I know...it's a horrible mish-mash between tables and spans.  what I need to do is center align the contents in the cell (in relation to the table and page around it), but the text and controls in the spans need to be left aligned.  

any suggestions?
cat4larryAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Doesn't make sense.
Something cannot be center aligned and left aligned.
Spans do not have a text alignment because they only ever take up enough space to fit the content (as a default)
0
COBOLdinosaurCommented:
I don't understand what you are trying to do.  Perhaps a screen shot or a link and a little more explicit description of the presentation you are trying to do would help.

Cd&
0
cat4larryAuthor Commented:
If you look at the code, you will see that it does make sense.  It was just hard to explain in the title alone.

Basically, the items in the cell are centered in relation to the table.  notice the table is 95% wide.  The items inside the cell don't take up all that 95% space.  so I want to center the items within that space.  

However, once inside the cell, I want the items to be left aligned in relation to each other.  Take a look at this:

<span style="float:left; width:200px;">
			<span style="font-size:larger; text-align:left;">Search Alphabetically:</span><br />
			<span><asp:DropDownList ID="ddlAlpha" AutoPostBack="true" runat="server" Width="150"></asp:DropDownList></span>                 
		</span>

Open in new window


I want "Search Alphabetically" and the DropDownList control to be left aligned in relation to each other.

What I think I'm going to do (since I don't have time to redesign the whole page using just CSS and doing it "right") is stick a table inside the 95% width cell.  Then add an "align=center" attribute to it and be done with it.  Not elegant, but it works.

Thanks
0
Angular Fundamentals

Learn the fundamentals of Angular 2, a JavaScript framework for developing dynamic single page applications.

GaryCommented:
Wrap your spans in a div (cannot really make it worse) and give it this css
   margin: 0 auto;
    width: 875px;
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
COBOLdinosaurCommented:
since I don't have time to redesign the whole page using just CSS and doing it "right

That is unfortunate, because every time I see an analysis of why a system fail it always contains some reference to there not being time to do it right.

In many years managing projects I never fired anyone for delivering a little late; if what they delivered was quality.  However a lot of developers who delivered on time were sent up the road because they gave me junk.  You know your situation better than I do, so do what you need to do.  If you need help now or down the road to do it right we'll be here.  

That said, what Gary is proposing is superior (though still ugly) to nested tables.

Cd&
0
cat4larryAuthor Commented:
I HATE junk.  Unfortunately my boss measures success only by how quickly it gets done (and therefore how cheaply) :(

D
0
cat4larryAuthor Commented:
@GaryC123 - just out of curiosity, does it have to be a div tag or can I wrap in a span tag and give it those style properties?

I'm assuming it doesn't matter.
0
GaryCommented:
You can use a span but you would then have to give it a display of block, which a div already is so kinda of making more work.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.