CSS按钮无法正确对齐

时间：2017-10-31 08:27:27

标签： html css twitter-bootstrap

Attached is a screenshot我有以下CSS。我希望按钮完美地对准导航中心和左侧。但是，目前我无法弄清楚如何正确对齐按钮并继续运行。我希望在https://house.jumia.com.ng/上完成同样的事情。任何帮助都将不胜感激！这是我的代码：

＆＃13;
＆＃13; 
.navbar-custom {
  background-color: #36b;
  color: #ffffff;
  border-radius: 0;
  height: 68px;
  margin-bottom: 0;
}

.navbar-custom .navbar-nav>li>a {
  color: #fff;
  text-align: center;
  padding-left: 0;
  padding: 25px 0 75px 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 13px;
}

.first {
  border-color: #73ADFF;
  color: #fff;
  background-color: #73ADFF;
  vertical-align: middle, !important;
  padding: 10px 16px;
  line-height: 16px;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
}
＆＃13; 
<nav class="navbar navbar-custom">
  <div class="container">
    <ul class="nav navbar-nav navbar-right">
      <a href="signup.php"><button class="btn first"><span class="glyphicon glyphicon-plus"></span>&nbsp;OFFER PROPERTY</button></a>
    </ul>

  </div>
</nav>
＆＃13;
＆＃13;
＆＃13;

7 个答案:

答案 0 :(得分：1)

尝试使用这个简单的代码：

＆＃13;
＆＃13; 
.navbar-custom {
  background-color: #36b;
  color: #ffffff;
  padding:5px;
  text-align:center;
}

.first {
border-color: #73ADFF;
color: #fff;
background-color: #73ADFF;
padding: 10px 15px;
}
＆＃13; 
<nav class="navbar navbar-custom">
  <div class="container">
    <ul class="nav navbar-nav navbar-right">
      <a href="signup.php"><button class="btn first"><span class="glyphicon glyphicon-plus"></span>&nbsp;OFFER PROPERTY</button></a>
    </ul>

  </div>
</nav>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

.navbar-custom {
                background-color:#36b;
                color:#ffffff;
                border-radius:0;
    			height:68px;
    			margin-bottom: 0;
                }

.navbar-custom .navbar-nav > li > a {
				color:#fff;
				text-align: center;
		    	padding-left: 0;
			    padding: 25px 0 75px 0;
			    font-family: 'Open Sans', sans-serif;
			    font-weight:300;
			    font-size:13px;
			}

    				.first {
      border-color: #73ADFF;
      color: #fff;
      background-color:#73ADFF;
      vertical-align:middle,!important;
      padding: 10px 16px;
      line-height: 16px;
      display: inline-block;
      font-size:12px;
      font-weight:600;
    }
    .ulClass{
    text-align:center;
    padding-left:0px

    }
<nav class="navbar navbar-custom">
      <div class="container">
           <ul class="nav navbar-nav navbar-right ulClass">  
              <a href="signup.php">
              <button class="btn first">
              <span class="glyphicon glyphicon-plus"></span>&nbsp;OFFER PROPERTY</button></a>
            </ul>
        </div>
</nav>

答案 2 :(得分：0)

只需将text-align: center;添加到父类.navbar-custom即可。这是工作代码段：

＆＃13;
＆＃13; 
<html>
    <style>
        .navbar-custom {
            background-color: #36b;
            color: #ffffff;
            border-radius: 0;
            height: 68px;
            margin-bottom: 0;
            text-align:center;
        }
    
        .first {
            border-color: #73ADFF;
            color: #fff;
            background-color: #73ADFF;
            vertical-align: middle, !important; /* you have a typo here*/
            padding: 10px 16px;
            line-height: 16px;
            display: inline-block;
            font-size: 12px;
            font-weight: 600;
            margin: 0 auto;
        }
    </style>
    <nav class="navbar navbar-custom">
        <div class="container">
            <ul class="nav navbar-nav navbar-right">
                <a href="signup.php">
                    <button class="btn first">
                        <span class="glyphicon glyphicon-plus"></span>&nbsp;OFFER PROPERTY</button>
                </a>
            </ul>
    
        </div>
    </nav>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

我不确定你在问什么。检查//评论

＆＃13;
＆＃13; 
.navbar-custom {
  background-color: #36b;
  color: #ffffff;
  border-radius: 0;
  height: 68px;
  margin-bottom: 0;
  
  text-align: center; // center horizontally
}

.navbar-custom .navbar-nav > li > a {
  color: #fff;
  text-align: center;
  padding-left: 0;
  padding: 25px 0 75px 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 13px;
}

.nav {
  padding: 0; // clear margin + padding of the <ul>
  margin: 0;
}

.first {
  border-color: #73ADFF;
  color: #fff;
  background-color: #73ADFF;
  vertical-align: middle, !important;
  padding: 10px 16px;
  line-height: 16px;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  
  margin: 14px 0; // center vertically
}
＆＃13; 
<nav class="navbar navbar-custom">
  <div class="container">
    <ul class="nav navbar-nav navbar-right">
      <a href="signup.php">
        <button class="btn first"><span class="glyphicon glyphicon-plus"></span>&nbsp;OFFER PROPERTY</button>
      </a>
    </ul>
  </div>
</nav>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

您可以使用flexbox将navbar-custom的内容居中，

只需添加： 

.navbar-custom {
  display: flex;
  /* Center vertically */
  align-items: center;
  /* Center horizontally */
  justify-content: center;
}

不要忘记删除默认列表样式：

ul {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}


ul {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}

.navbar-custom {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #36b;
  color: #ffffff;
  border-radius: 0;
  height: 68px;
  margin-bottom: 0;
}

.navbar-custom .navbar-nav>li>a {
  color: #fff;
  text-align: center;
  padding-left: 0;
  padding: 25px 0 75px 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 13px;
}

.first {
  border-color: #73ADFF;
  color: #fff;
  background-color: #73ADFF;
  vertical-align: middle, !important;
  padding: 10px 16px;
  line-height: 16px;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
}
<nav class="navbar navbar-custom">
  <div class="container">
    <ul class="nav navbar-nav navbar-right">
      <li>
        <a href="signup.php"><button class="btn first"><span 
        class="glyphicon glyphicon-plus"></span>&nbsp;OFFER 
        PROPERTY</button></a>
      </li>
    </ul>

  </div>
</nav>

答案 5 :(得分：0)

<li>中缺少<ul>元素 只允许<li>个项目作为<ul>的直接子项。

另外，您的按钮没有与中心对齐，您可以在<ul>内执行此操作：

＆＃13;
＆＃13; 
.navbar-custom {
  background-color: #36b;
  color: #ffffff;
  border-radius: 0;
  height: 68px;
  margin-bottom: 0;
}

.navbar-custom .navbar-nav {
  list-style-type: none;
  text-align: center;
}

.navbar-custom .navbar-nav>li>a {
  color: #fff;
  text-align: center;
  padding-left: 0;
  padding: 25px 0 75px 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 13px;
}

.first {
  border-color: #73ADFF;
  color: #fff;
  background-color: #73ADFF;
  vertical-align: middle, !important;
  padding: 10px 16px;
  line-height: 16px;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
}
＆＃13; 
<nav class="navbar navbar-custom">
  <div class="container">
    <ul class="nav navbar-nav navbar-right">
      <li>
        <a href="signup.php"><button class="btn first"><span class="glyphicon glyphicon-plus"></span>&nbsp;OFFER PROPERTY</button></a>
      </li>
    </ul>

  </div>
</nav>
＆＃13;
＆＃13;
＆＃13;

答案 6 :(得分：0)

Due to the bootstrap framework, the snippet showing here is different from what I have on my screen. Attached is a screenshot感谢所有与我联系的人。我对我的CSS做了一点调整，我已经实现了我想要实现的目标。这是代码：

.navbar-custom {
            background-color:#36b;
            color:#ffffff;
            border-radius:0;
			height:68px;
			margin-bottom: 0;
            }
			
			.navbar-custom .navbar-nav > li > a {
				color:#fff;
				text-align: center;
		    	padding-left: 0;
			    padding: 25px 0 75px 0;
			    font-family: 'Open Sans', sans-serif;
			    font-weight:300;
			    font-size:13px;
			}
		
				.first {
  border-color: #73ADFF;
  color: #fff;
  background-color:#73ADFF;
  vertical-align:middle,!important;
      padding: 10px 16px;
	  line-height: 16px;
	      display: inline-block;
		  font-size:12px;
		  font-weight:600;
		  margin-top:14px;
		  margin-right:100px;
}
  <nav class="navbar navbar-custom">
                 <div class="container">
                                              <ul class="nav navbar-nav navbar-right">  
                          <a href="signup.php"><button class="btn first"><span class="glyphicon glyphicon-plus"></span>&nbsp;OFFER PROPERTY</button></a>
                            </ul>
                       </div>
                  </nav>

相关问题
最新问题