CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Asvp
Asvp

Reputation: 23

CSS button won't align correctly

Attached is a screenshot I have the following CSS. I want the button to align perfectly at the center of the nav and towards the left. However, currently I cannot figure out a way to get the button aligned properly and to continue functioning. I want to achieve the same thing done on https://house.jumia.com.ng/ Any help would be appreciated! Here's my code:

.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;
}
<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>

Upvotes: 1

Views: 816

Answers (7)

Kristijan Jovanovic
Kristijan Jovanovic

Reputation: 3

Just add text-align: center; to the parent class .navbar-custom. Here's the working code snippet:

<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>

Upvotes: 0

Hrishabh Singh
Hrishabh Singh

Reputation: 102

Try with this easy code:

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

.first {
border-color: #73ADFF;
color: #fff;
background-color: #73ADFF;
padding: 10px 15px;
}
<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>

Upvotes: 1

Asvp
Asvp

Reputation: 23

Due to the bootstrap framework, the snippet showing here is different from what I have on my screen. Attached is a screenshot Thanks to everyone that reached out to me. I made a little adjustment to my css, and I have achieved what I was trying to achieve. Here's the code:

.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>

Upvotes: 0

Sergey Sklyar
Sergey Sklyar

Reputation: 1970

You have the <li> element missing in <ul>.
Only <li> items allowed as a direct child of <ul>.

Plus your button isn't aligned to center, you can do it inside the <ul>:

.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;
}
<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>

Upvotes: 0

Victor Allegret
Victor Allegret

Reputation: 2404

You can use flexbox to center the content of the navbar-custom,

just add :

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

Don't forget to remove default list style :

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>

Upvotes: 0

Hotgeart
Hotgeart

Reputation: 384

I'm not sure what you're asking. Check the // comment

.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
}
<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>

Upvotes: 0

Nofar Eliasi
Nofar Eliasi

Reputation: 109

.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>

Upvotes: 0

Related Questions