INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

center-align menu item text

center-align menu item text

(OP)
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="http://www.w3.org/1999/xhtml">
<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> 






RE: center-align menu item text

(OP)
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> 

RE: center-align menu item text

Quote:

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.

RE: center-align menu item text

(OP)
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.

RE: center-align menu item text

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
{
text-align:center;
}


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

RE: center-align menu item text

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-navi...
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.

RE: center-align menu item text

(OP)
Thanks a lot.

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

CODE

<html xmlns="http://www.w3.org/1999/xhtml">
<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="http://www.w3.org/1999/xhtml">
<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.



RE: center-align menu item text

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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close