标题和导航栏对齐

我只是回到网站的工作，并不能为我的生活中心此导航栏。我将标题向左移动，并感觉我已经尝试了每个可能的属性，但它不会居中。任何帮助将非常感激。标题和导航栏对齐

不集中的NavBar：

.container { 
 
    margin: 0 auto; 
 
    background-color: #fff; 
 
} 
 

 
.header-heading { 
 
    float: left; 
 
    padding-top: 8px; 
 
    padding-left: 5px; 
 
    color: #ddd; 
 
    font-size: 30px; 
 
} 
 

 
.nav-bar { 
 
    background: #000; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 

 
.nav { 
 
    margin: auto; 
 
    padding: 0; 
 
    list-style: none; 
 
    text-align: center; 
 
    width: 100%; 
 
}

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 

 
<title>Web Report Demo</title> 
 

 
<styles></styles> 
 
<link rel="stylesheet" href="ed.css"> 
 

 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <h1 class="header-heading">Web Reporting Demo</h1> 
 
    <div class="nav-bar"> 
 
     <ul class="nav"> 
 

 
     <li><a href="dailymaster.php">Daily Master</a></li> 
 
     <li><a href="route_progress.php">Route Progress</a></li> 
 
     <li><a href="ul_move_query.php">UL Move Query</a></li> 
 
     <li><a href="stock_query.php">Stock Query</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</body>

来源

2017-09-24 James Pavett

尝试在导航类中添加'clear：both;' – M0ns1f

居中，但现在标题和导航栏堆叠在两个不同的图层上，而不是同一个图层。 –

这应该工作

.container { 
    margin: 0 auto; 
    background-color: #000; 
    position:relative; 
    width: 100%; 
    height: 40px; 
} 
.header-heading { 
    position: absolute; 
    top:-20px; 
    left:5px; 
    color: #ddd; 
    font-size: 30px; 
} 


.nav-bar { 
    padding-top: 5px; 
} 

.nav { 
    margin: auto; 
    padding: 5px; 
    list-style: none; 
    text-align: center; 
    width: 100%; 
} 

.nav li { 
    display: inline; 
    padding: 5px; 
} 

.nav li a { 
    text-decoration: none; 
    color: #fff; 
}

你需要为你在响应式设计的工作做了一些修改。

来源

2017-09-24 17:23:35

这工作完美！谢谢 –

不要忘记标记问题已解决 –

-1

尝试给.container text-align: center。

来源

2017-09-24 17:12:15 OneBeginner

标题和导航栏对齐

回答

相关问题