Search code examples
cssasp.nethttplabelcenter

What is proper way to Center a Label element using CSS in a asp.net .master page


I am trying to put together a asp.net webforms website for a church fellowship organization and I am having to learn to work with building this website from scratch using Visual Studio Express 2013 for Web's Empty asp.net Website Template and since I have never done websites before, I am having to search through the Internet for examples, most of my programming experience comes from C# and I just don't seem to be able to find a solution for this.

Anyway my problem is that I can't figure out how to Center a asp.net Label on the SiteMasterPage.master

<div class="header1">
  <br />
  <br />
  <h1 class="auto-style1">Calvary Christian FellowshipGA, Inc.</h1>
  <div style="align-items: center">
    <asp:Label ID="Label1" runat="server" CssClass="ccfgaLabel" ForeColor="#0066FF" Text="Calvary Christian FellowshipGA, Inc."></asp:Label>
  </div>
  <br />
  <br />
  <p>
    Informational Text here.
  </p>
  <br />
  <p>
    More Informational Text here.
  </p>
</div>

I've tried a couple things the above being the latest, the only thing I've found that actually worked was to use:

<center>
  MY Label
</center>

the only issue with this use of 'center' is that I get the 'center' is deprecated warning. I would like to be able to do this correctly, could someone give me some suggestions how to get this done.

I tried the following from a .css file.

.ccfgaLabel
{
    display: inline-block; 
    width: 230px;
    /*margin-left: 10px;*/
    margin-left: auto;
    margin-right: auto;
}

The only thing that seemed to work in it were the

width: 230px; 

and

margin-left: 10px;

I would like to set this up inside the css file since this is all gonna be on a MasterPage.

*Edit: I should point out that the only reason I decided to try a Label was that I wanted a Bordered and Shaded, Box aspect around the Text and I hadn't yet tried to see if bordering and shading was possible just around specific Text centered in the middle of the page.


Solution

  • So, since the comment worked, here's the posted answer.

    Instead of your align-items that you set on the wrapper div, use the text-align property, that is used to specify the alignment of inline content:

    <div style="text-align: center">
      <asp:Label ID="Label1" runat="server" CssClass="ccfgaLabel" ForeColor="#0066FF" Text="Calvary Christian FellowshipGA, Inc."></asp:Label>
    </div>
    

    Though I recommend you not to set it as an inline style. Rather, give the div an id or a class and leave the property on the stylesheet.

    MDN text-align docs