html - 导航栏中的对齐 - 非常初学者

标签 html css

friend 。我是 HTML 和 CSS 的初学者

对于如何将导航栏上的文本(客户、常见问题解答和联系方式)居中,我有点困惑。

我已经尝试过垂直居中对齐,但它仍然坚持在顶部。非常感谢您的帮助。

nav {
  background-color: RGB(80, 80, 95);
  height: 50px;
  position: fixed;
  top: 100px;
  width: 100%;
}

nav a {
  float: inline;
  width: 200px;
  padding-top: 10px;
  height: 40px;
  text-align: center;
  font-size: 1.1em;
  color: white;
  text-decoration: none;
}

.pull-right{
  text-aling: center;
}

body{
  background-color:black;
  font-family:Lobster;
  color:white;
}

h1{
  padding:0;
  margin-top:0px;
  font-size:5.0em;
  padding-top:0%;
}

.btn-default{
  background-color:black;
  border-color:black;
  color:#337ab7;
  font-size:1.7em;
  margin-top:1%;
}

.pageOne{
  background:url("http://www.chairmanenglish.com/wp-content/uploads/2017/01/img_title_bg.jpg");
 background-size:cover;
  padding-bottom:10%;
  padding-top:10%;
  margin-top:80px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<header>
  <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</header>

<div class="pageOne text-center" id="p1">
  <ul class="nav nav-pills navbar-fixed-top">
    <li class="logo-left-top">
      <a href="#p1"><img src="http://www.chairmanenglish.com/wp-content/uploads/2017/01/img_bi_top.png" width="100px" heigth="50px"></a>
    </li>
      
    <li class="pull-right">
      <a href="#p4">CONTACT</a>
    </li>
    <li class="pull-right">
      <a href="#p2">FAQ</a>
    </li>

     <li class="pull-right">
      <a href="#p3">CUSTOMER</a>
    </li>
          
  </ul>

最佳答案

我能够使用它:

.pull-right{
    width: 25%;
}

以及对其他人提到的一些错误的更正。

请看这里:http://codepen.io/Squeakasaur/pen/vxrgYd

关于html - 导航栏中的对齐 - 非常初学者,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42990269/

相关文章:

javascript - 在css中使用url()时如何设置图片的宽高

javascript - 无法将 JQuery 表单验证与两个按钮 html 表单一起使用

javascript - 使用 JavaScript 隐藏 SVG 元素

jquery - 如何使垂直图像缩略图 slider 响应?

javascript - 创建 div 元素时奇怪的 Javascript/JQuery 行为

css - 方式显示:table doesn't act like regular table?

javascript - 使用javascript根据值改变颜色

javascript - jQuery - 将变量传递给点击功能

javascript - 为什么这两个表格都是单页的?

css - 是否有一种 0 宽度的方法来防止 float div 折叠