How to center dynamic content?

Lets say you have some dynamic content that you need to center. For example a few buttons:

<asp:Button ID="btnBack" runat="server" Text="Back" />

<asp:Button ID="btnSave" runat="server" Text="Save" />

<asp:Button ID="btnNext" runat="server" Text="Next" />


and lets say in some cases you show btnSave in some cases not.

So ideally you want to use div and margin auto for centering:

<div style="margin:0 auto;width:200px;">

      <asp:Button ID="btnBack" runat="server" Text="Back" />

      <asp:Button ID="btnSave" runat="server" Text="Save" />

      <asp:Button ID="btnNext" runat="server" Text="Next" />

</div>

 

But, you don't know exact width, since number of buttons is variable. Of course you can make width dynamic in code behind. However sometimes width is difficult to calculate, so you need better solution.

Table is a saver:

<table align="center">

    <tr>

      <td>

        <asp:Button ID="btnBack" runat="server" Text="Back" />

        <asp:Button ID="btnSave" runat="server" Text="Save" />

        <asp:Button ID="btnNext" runat="server" Text="Next" />

      </td>

    </tr>

</table>


Posted on Thursday, August 14, 2008 by | Comments (2) | Add Comment

Comments

Gravatar

Re:How to center dynamic content?

Thank you so much for this! So many people refer to CSS to center content. I wanted to center a menu in Wordpress, but the problem is that I'd center it in CSS and when I'd add an item to the menu it would become off-center. It's ridiculous that CSS has very primitive centering! Simply adding a table did the trick. Thanks a lot!

Posted on 9/14/2010 3:33:10 AM by Pest #
Gravatar

Re:How to center dynamic content?

I tried several ways and this is the only one that worked. Thanks very much.

Posted on 2/4/2011 3:33:50 AM by Adam #

New Comment

Your Name:
Email (for internal use only):
Comment:
 
Code above:

Categories

Recent Tweets

  • Simon Ince's Blog: Hierarchies with HierarchyID in SQL 2008 http://t.co/xSDwiF6rRS.
  • Visual Studio 2010 WAS painfully slow - CodeProject http://t.co/Usba1x6CZy

Valid HTML5