CODEWITHSUNDEEP
htmlcss
Joel Hoelting
Joel Hoelting

Reputation: 1992

Centering a list item in an unordered list

I've been bashing my head against a wall for too long trying to figure this one out.

I'm building a responsive site for my blog. The navbar is composed of an <ul> with 6 <li>'s. 5 of them display on a full-size screen. The navicon appears and other list items disappear when the screen is scaled down to mobile size. For some reason I can't get the navicon(hamburger icon) to appear in the center of the screen. I'm trying to avoid centering it using position: relative. 

/*Reponsive CSS*/

@media only screen and (max-width: 500px) {

#navbar nav a {
	display: none;
}

#navbar nav a.menu-icon {
	display: block;
	font-size: 35px;
	padding: 30px 30px;
}

#navbar nav a.menu-icon:hover {
	text-decoration: none;
}


}
<aside>
	<div id="navbar">
		<nav>
			<ul>
				<li><a href="/">Item 1</a></li>
				<li><a href="blank.html">Item 2</a></li>
				<li><a href="blank.html">Item 3</a></li>
				<li class="pull-right"><a href="blank.html">Item 4</a></li>
				<li class="pull-right"><a href="blank.html">Item 5</a></li>
				<li><a href="#" class="menu-icon">&#9776;</a></li><!--On a mobile device this is the only list item displaying -->
			</ul>
		</nav>
	</div>
</aside>

current version

Upvotes: 0

Views: 123

Answers (2)

GoMega54
GoMega54

Reputation: 148

You can use text-align: center;, but will need to target the list item rather than the anchor tag. This will also center it between the right most side of the ordered list and the right side of the page. To offset this you can set the margin on the right side of the icon to offset the width.

Something like this

HTML:

<li class="center"><a href="#" class="menu-icon">&#9776;</a></li>

CSS

.center {
    text-align: center;
    margin-right: 40px;
}

Edit: After looking at the site, it looks like the line aside nav ul li { float: left; }in your main CSS file is over riding the menu icon in the responsive design and forcing it to pull left. If you remove this line it messes up the whole nav bar so you may consider putting a media query on it at a min 500px (if this is your break point) like this:

 @media only screen and (min-width: 500px) {
    aside nav ul li { float: left; }
}

With this you would not need the CSS code given above and can center the icon with a good old fashioned margin: 0 auto; in your responsive design section.

 .center {
        margin: 0 auto;
    }

Be sure to keep class="center" targeting your list item. Hope this works :-).

Upvotes: 0

Kevin Pe&#241;a
Kevin Pe&#241;a

Reputation: 782

You can center elements or text nodes by setting text-align:center; or you can center block elements by applying margin-left: auto; margin-right: auto; on the element itself.

In this case the <li> and its <a> are spanning the entire width of their parent, its just the text inside the <a> that its not centered. So you would have to apply text-align: center; to the .menu-icon class

/*Reponsive CSS*/

@media only screen and (max-width: 500px) {

#navbar nav a {
	display: none;
}

#navbar nav a.menu-icon {
    display: block;
    font-size: 35px;
    padding: 30px 30px;
    text-align: center;
}

#navbar nav a.menu-icon:hover {
	text-decoration: none;
}


}
<aside>
	<div id="navbar">
		<nav>
			<ul>
				<li><a href="/">Item 1</a></li>
				<li><a href="blank.html">Item 2</a></li>
				<li><a href="blank.html">Item 3</a></li>
				<li class="pull-right"><a href="blank.html">Item 4</a></li>
				<li class="pull-right"><a href="blank.html">Item 5</a></li>
				<li><a href="#" class="menu-icon">&#9776;</a></li><!--On a mobile device this is the only list item displaying -->
			</ul>
		</nav>
	</div>
</aside>

Upvotes: 2

Related Questions