user559142
user559142

Reputation: 12527

Centering contents of a div - using CSS

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?

Upvotes: 2

Views: 3433

Answers (2)

Pranay Rana
Pranay Rana

Reputation: 176956

For centering content in a div

text-align:center;

Upvotes: 3

Ionut
Ionut

Reputation: 2858

<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" /> 

Upvotes: 2

Related Questions