center-align menu item text 1

AzizKamal · Sep 7, 2016

I am using Visual Studio 2010 Professional.

I created a web form in ASP.NET showing menu items that allow the user to go to another aspx page. For this purpose, I used Menu control from the Navigation section in the Toolbox.

The menu appears fine in the browser. However, the text of the MenuItem is aligned left on the screen. I need to show the text of each menu item aligned center on the screen. The Orientation property of Menu1 is set to Vertical. I have entered CSS code for text-align:center and also set <StaticMenuItemStyle CssClass="Menu" />. But still, the menu options are shown left aligned on the screen. The following menu options are displayed on the screen:

Add New Department (need it centered on the screen)
Add New Location (need it centered on the screen)
Enter Details (need it centered on the screen)

The code written is as follows:

Code:

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head runat="server">
<title>Application Main Menu</title>
<style type="text/css">
.Menu li a
{
    text-align:center;
}
</style>
</head>
<body>
    <form id="form1" runat="server">
    <uc1:Header ID="Header1" runat="server" />
    <h1 align="center"><span lang="en-us">Main Menu</span></h1>
    <asp:Menu ID="Menu1" runat="server">
    <Items>
        <asp:MenuItem NavigateUrl="department.aspx" Text="Add New Department<br></br>" Value="Department">
        </asp:MenuItem>
        <asp:MenuItem NavigateUrl="location.aspx" Text="Add New Location<br></br>" Value="Location">
        </asp:MenuItem>
        <asp:MenuItem NavigateUrl="details.aspx" Text="Enter Details<br></br>" Value="Detail">
        </asp:MenuItem>
    </Items>
    <StaticMenuItemStyle CssClass="Menu" />
    </asp:Menu>
    </form>
</body>
</html>

The HTML portion that is output to the browser is as follows:

Code:

<div id="Menu1">
	<ul class="level1">
		<li><a class="level1 Menu" href="department.aspx">Add New Department<br></br></a></li>
		<li><a class="level1 Menu" href="location.aspx">Add New Location<br></br></a></li><li>
		<a class="level1 Menu" href="details.aspx">Enter Details<br></br></a></li>
	</ul>
</div>

ChrisHirst · Sep 7, 2016

thread215-1769365

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind these jesus character, stars had to die for me to live.

AzizKamal · Sep 7, 2016

Thanks.

I applied horizontal centering with css as mentioned in this link:

http://vanseodesign.com/css/centering-with-css

I added the following css:

Code:

<style type="text/css">
div#container
{
   width:760px;
   margin:0 auto;
}
</style>

and the div tag of Menu Items is as follows:

Code:

    <div id="container">
    <asp:Menu ID="Menu1" runat="server">
    <Items>
        <asp:MenuItem NavigateUrl="department.aspx" Text="Add New Department<br></br>" Value="Department">
        </asp:MenuItem>
        <asp:MenuItem NavigateUrl="location.aspx" Text="Add New Location<br></br>" Value="Location">
        </asp:MenuItem>
        <asp:MenuItem NavigateUrl="details.aspx" Text="Enter Details<br></br>" Value="Detail">
        </asp:MenuItem>
    </Items>
    </asp:Menu>
    </div>

After this, the menu options are showing with space from left margin. However, each menu option is not exactly aligned horizontally on the screen. It may be because of width:760px; setting because the screen resolutions vary from one computer to another. For my computer, the screen resolution is 1366 x 768.

The HTML that is output to the browser is as follows:

Code:

<div id="container">
    <ul class="level1">
	<li><a class="level1" href="department.aspx">Add New Department<br></br></a></li>
	<li><a class="level1" href="location.aspx">Add New Location<br></br></a></li>
	<li><a class="level1" href="details.aspx">Enter Details<br></br></a></li>
    </ul>
</div>

ChrisHirst · Sep 7, 2016

the menu options are showing with space from left margin.

That will probably be the line breaks in the anchor text throwing it off.

If you need to put white space below the link, use padding-bottom or line-height on the <li> rather than two <br> elements in the anchor text.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind these jesus character, stars had to die for me to live.

AzizKamal · Sep 8, 2016

Thanks Chris.

My main issue is to align the menu options centered on screen that I have not been able to accomplish accurately. Suppose I create a blank Microsoft Word Document and type Add New Department. Then I press the Home key to place the cursor on the left. Then I select Center on paragraph text or press Ctrl+E. It will center-align the text Add New Department on the document. I need to center-align horizontally Add New Department in the same way on the screen through CSS.

vacunita · Sep 8, 2016

A website is not a word document, it does not work the same, and you should not attempt to make it work the same.

If you need the text inside a list element <li> to be centered, then you need to give the center property to each <li>.

Remove the <br> from each <li> element and simply set its text-align property to center.

This will center the text in the <li> in relation to the width of the <li>

Code:

div#container ul.level1 li
{
[indent]text-align:center;[/indent]
}

If you need to center all 3 <li> elements, than that will require a bit more CSS, and where you place the center property will change if you place it all. Note that you cannot simply center a block level element such as <li> without more CSS.

----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech

ChrisHirst · Sep 8, 2016

Not a MS Windows user so MS Word examples mean nowt to me

Set a full width, block level element with text-align: center; applied to it, containing the text you want to be central.

for example:

<h1 style="text-align: center; width: 100%;padding: 0; margin: 0;>Centred Text<h1>

Will give centred text.

Put that in the body element or any parent you want it centred with respect to, adjusting the padding to suit whatever top and bottom white space you require.

So, is your navigation intended to be a single line of text items centred to the document 'y' axis

Something like;

http://examples.webmaster-talk.eu/css/centred-navigation-bar/

borders added for demonstration purposes.

Or??

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind these jesus character, stars had to die for me to live.

AzizKamal · Sep 9, 2016

Thanks a lot.

The following code generated the exact output on screen that I needed.

Code:

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head runat="server">
<title>Application Main Menu</title>
<style type="text/css">
div#container ul.level1 li
{
text-align:center;
list-style-type: none;
} 
</style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="container">
    <ul class="level1">
    <li><a href="department.aspx">Add New Department</a></li>
    <li><a href="location.aspx">Add New Location</a></li>
    <li><a href="details.aspx">Enter Details</a></li>
    </ul>
    </div>
    </form>
</body>
</html>

I will use the above code for my application.

Earlier, I had used ASP.NET Menu Control by dragging it from the Navigation group in the Toolbox. However, in that case, <li> tags are generated during execution, and I have little control over its design. Hence, I could not achieve the same results through the following code.

Code:

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head runat="server">
<title>Application Main Menu</title>
<style type="text/css">
div#container ul.level1 li
{
text-align:center;
list-style-type: none;
} 
</style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="container" class="level1">
        <asp:Menu ID="Menu1" runat="server">
            <Items>
                <asp:MenuItem Text="Add New Department" Value="Add New Department" 
                    NavigateUrl="department.aspx">
                </asp:MenuItem>
                <asp:MenuItem Text="Add New Location" Value="Add New Location" 
                    NavigateUrl="location.aspx"></asp:MenuItem>
                <asp:MenuItem Text="Enter Details" Value="Enter Details" 
                    NavigateUrl="details.aspx"></asp:MenuItem>
            </Items>
        </asp:Menu>
    </div>
    </form>
</body>
</html>

Chris,
Your example shows a good demonstration of centre-aligned menu. I say it a horizontal menu bar. In my case, menu options are displayed vertically, like Add New Department on Line1 or Row1, Add New Location on Line2 or Row2, and Enter Details on Line3 or Row3.

vacunita · Sep 9, 2016

Glad it worked

----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

center-align menu item text 1

AzizKamal

Programmer

ChrisHirst

IS-IT--Management

AzizKamal

Programmer

ChrisHirst

IS-IT--Management

AzizKamal

Programmer

vacunita

Programmer

ChrisHirst

IS-IT--Management

AzizKamal

Programmer

vacunita

Programmer

Similar threads

Part and Inventory Search

Sponsor