center a nav menu [duplicate]

Navigation
0

How can I centralize this menu? 

ul{
	margin: 0;
}
ul {
	list-style: none;
}
a {
	text-decoration: none;
}
.clearfix:after {
	display: block;
	content: " ";
	clear: both;
}
#site-navigation {
	background-color: #111;
	border-top: 4px solid #289dcc;
}
li {
	float:left;
	position: relative;
	font-family: 'Open Sans', serif;
	font-weight: 300;
}
a {
	color: #ffffff;
	display: block;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 12px;
	text-transform: uppercase;
}

.main-navigation a:hover, .main-navigation ul li.current-menu-item {
	background-color: #289dcc;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
</head>
<link rel="stylesheet" id="colormag_style-css" href="files/style.css" type="text/css" media="all">

<body bgcolor="#000000" style="margin:0px;">

<div align="center"><b style="font-size:50px; color:#FFF">LOGO</b></div>

<nav id="site-navigation" class="main-navigation">
				<div class="clearfix">
               <ul>

<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
</ul></div>                                    
                                                  
               				</div>
			</nav></div>

</body>
</html>
    
asked by anonymous 18.07.2017 / 14:18

5 answers

0

Remove float and position from li and add display: inline-block; add padding: 0; and text-align: center; to ul 

ul {
    margin: 0;
    padding: 0;
	list-style: none;
    text-align: center;
}
a {
	text-decoration: none;
}
.clearfix:after {
	display: block;
	content: " ";
	clear: both;
}
#site-navigation {
	background-color: #111;
	border-top: 4px solid #289dcc;
}
li {
	display: inline-block;
	font-family: 'Open Sans', serif;
	font-weight: 300;
}
a {
	color: #ffffff;
	display: block;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 12px;
	text-transform: uppercase;
}

.main-navigation a:hover, .main-navigation ul li.current-menu-item {
	background-color: #289dcc;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
</head>
<link rel="stylesheet" id="colormag_style-css" href="files/style.css" type="text/css" media="all">

<body bgcolor="#000000" style="margin:0px;">

<div align="center"><b style="font-size:50px; color:#FFF">LOGO</b></div>

<nav id="site-navigation" class="main-navigation">
				<div class="clearfix">
               <ul>

<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
</ul></div>                                    
                                                  
               				</div>
			</nav></div>

</body>
</html>
    
18.07.2017 / 14:36
0

Follow the example 

nav{
    width: 100%;
    float: left;
}

ul{
	margin: 0 auto;
    width: 350px;
    list-style: none;
}
a {
	text-decoration: none;
}
.clearfix:after {
	display: block;
	content: " ";
	clear: both;
}
#site-navigation {
	background-color: #111;
	border-top: 4px solid #289dcc;
}
li {
	float:left;
	position: relative;
	font-family: 'Open Sans', serif;
	font-weight: 300;
}
a {
	color: #ffffff;
	display: block;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 12px;
	text-transform: uppercase;
}

.main-navigation a:hover, .main-navigation ul li.current-menu-item {
	background-color: #289dcc;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body bgcolor="#000000" style="margin:0px;">

<div align="center"><b style="font-size:50px; color:#FFF">LOGO</b></div>

<nav id="site-navigation" class="main-navigation">
				<div class="clearfix">
               <ul>

<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
</ul></div>                                    
                                                  
               				</div>
			</nav></div>
</body>
</html>
    
18.07.2017 / 14:28
0

You should get the list effect on ul with margin and padding 0 also 

ul{
	margin: 0;
}
ul {
	list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin:0;
  padding: 0;
}
a {
	text-decoration: none;
}

#site-navigation {
	background-color: #111;
	border-top: 4px solid #289dcc;
}
li {
	font-family: 'Open Sans', serif;
	font-weight: 300;
}
a {
	color: #ffffff;
	display: block;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 12px;
	text-transform: uppercase;
}
.main-navigation a:hover, .main-navigation ul li.current-menu-item {
	background-color: #289dcc;
}
<div align="center"><b style="font-size:50px; color:#FFF">LOGO</b></div>

<nav id="site-navigation" class="main-navigation">
				<div class="clearfix">
               <ul>

<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">MENU</a></li>
</ul>
</div>                                    
</nav>

use Flexblox

    
18.07.2017 / 14:36
0

Make these small changes: 

.clearfix {
    text-align: center;
}
ul {
    padding: 0;
}
li {
    /* float: left; */ /* REMOVA */
    display: inline-block;
}

Follow the example: 

.clearfix {
  text-align: center;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

.clearfix:after {
  display: block;
  content: " ";
  clear: both;
}

#site-navigation {
  background-color: #111;
  border-top: 4px solid #289dcc;
}

li {
  display: inline=-block;
  position: relative;
  font-family: 'Open Sans', serif;
  font-weight: 300;
}

a {
  color: #ffffff;
  display: block;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 12px;
  text-transform: uppercase;
}

.main-navigation a:hover,
.main-navigation ul li.current-menu-item {
  background-color: #289dcc;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Documento sem título</title>
</head>
<link rel="stylesheet" id="colormag_style-css" href="files/style.css" type="text/css" media="all">

<body bgcolor="#000000" style="margin:0px;">

  <div align="center"><b style="font-size:50px; color:#FFF">LOGO</b></div>

  <nav id="site-navigation" class="main-navigation">
    <div class="clearfix">
      <ul>

        <li><a href="#">MENU</a></li>
        <li><a href="#">MENU</a></li>
        <li><a href="#">MENU</a></li>
        <li><a href="#">MENU</a></li>
        <li><a href="#">MENU</a></li>
      </ul>
    </div>

    </div>
  </nav>
  </div>

</body>

</html>
    
18.07.2017 / 15:03
0

Your tag li in CSS is set to float: left . (Remove this)

Remove this definition from float and as a solution is to make it easier to maintain CSS next to the component view, set the class of your tag ul

andinCSSaddthefollowingpoints:

I believe this will already give you the desired result.

    
18.07.2017 / 14:43
Regex function whitespace SQL Server 2008 [duplicate] Mapping Json Angular 2 data