Kevin
Kevin

Reputation: 4848

How to center without the <center> tag using CSS?

I have some code that uses the center tag to center two buttons on the screen:

<center>
    <input type="button" onclick="parent.window.close();" value="Close Window" id="Button1" name="Button1" />
    <% 
       if (Session["MyRoleName"].ToString().ToUpper() == "SUPERMANADMIN")
       {
    %>
    <input type="button" onclick="if (confirm('ARE YOU SURE?  This cannot be undone except by IT at great cost!')) { PurgeCourse(); }" value="Purge Course Comments" id="Button2" name="Button2" />
    <%  } %>
</center>

Since the center tag is deprecated, I thought I'd try replacing it with a <div> tag, and setting the margin to margin: 0 auto. This did not center the buttons on the screen.

My question is, how can I center these two buttons on the screen, horizontally, without using the <center> tag?

Upvotes: 1

Views: 2999

Answers (2)

freshyill
freshyill

Reputation: 393

Centering something using margin: 0 auto only works on block-level elements that have a set width (otherwise they'd span the full width of their parent element).

text-align: center is fine if you're only trying to center the text within an element.

You can find full documentations on CSS text properties here: http://www.w3.org/TR/CSS21/text.html

Upvotes: 1

Felipe Oriani
Felipe Oriani

Reputation: 38638

Try using css to do this, for sample:

<div style="text-align: center">
    <input type="button" onclick="parent.window.close();" value="Close Window" id="Button1" name="Button1" />
    <% if (Session["MyRoleName"].ToString().ToUpper() == "SUPERMANADMIN") { %>
    <input type="button" onclick="if (confirm('ARE YOU SURE?  This cannot be undone except by IT at great cost!')) { PurgeCourse(); }" value="Purge Course Comments" id="Button2" name="Button2" />
    <%  } %>
</div>

Upvotes: 2

Related Questions