Centering contents of a div - using CSS

Question

I have the following source in a user control:

<asp:Panel runat="server" ID="PanelParametersList" CssClass="AccessReportParameterControls"></asp:Panel>

<div class = "buttonpanel">
<asp:Button ID="Button1" runat="server" Text="View Report" 
    onclick="Button1_Click"></asp:Button>
<asp:Button ID="Button2" runat="server" Text="Back" 
    onclick="Button2_Click"></asp:Button>
</div>

In the header of the containing aspx page I am adding css styles:

<style type="text/css">
    .ReportViewer_AccessReportViewer { position:absolute; top:50px; }
    .ReportViewer_AccessReportViewer_noparams { position:absolute; top:0px; }
    .AccessReportParameterControls {width: 100%; background-color: #E4E4EC; padding: 5px; }
    .ParameterContainer {width: 100%;}
    .ParameterControlLabel {padding:0, 10, 0, 10;}
    .AccessReportParameters {width: 100%;}
    .buttonpanel {margin:0 auto; }

</style>

I am trying to center the contents of the button panel div but am having no luck.....any ideas?

Answer 1

用于在div中居中放置内容

text-align:center;

Answer 2

<div class = "parent">
    <button />
</div>

Style:

.parent{
    text-align:center;
}

This is all you need to do. Set the text-align to center in any parent container and the inline elements will follow the rule.

As a good practice I would advice you to place your styles in a different style.css file and place this in your .asp files:

<link href="style.css" rel="stylesheet" type="text/css" />