What is a promise in Javascript?

Question

EMCode

Asked: 2020-12-13 12:50:21 +0800 CST 2020-12-13 12:50:21 +0800 CST 2020-12-13 12:50:21 +0800 CST

Center or justify Bootstrap navbar menu

772

I have the following navbarwith Bootstrap 3:

.affix-top{
   transition: top 2s ease 2s;
    -webkit-transition: top 2s ease 2s;
    -moz-transition: top 2s ease 2s;
    -o-transition: top 2s ease 2s;
}

.affix {
    top: 0px;
    width: 100%;
    z-index: 999 !important;
    padding-top: 90px;
    text-align: center;   
    background-color: #fff;
    padding: 12px 0 12px 0;
    border-bottom: 3px double rgba(0, 0, 0, 0.1);
    box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08); 
  }

  .affix+.container-fluid {
    padding-top: 300px;
  }

.navbar {   
    border: 1px solid transparent;
    background: #fff;
    border-radius: 10px;
    min-height: 0;
}
.navbar-toggle {
    position: relative;
    float: right;
    margin-right: 15px;
    padding: 10px 10px;
    margin-top: 10.5px;
    margin-bottom: 10.5px;
    background-color: #848484;  
    border: 1px solid transparent;
    border-radius: 5px;
}

#fh5co-header {
    padding: 20px 0 0 0;
}

#fh5co-header nav ul li {
    padding: 0;
    margin: 0;
    list-style: none;
    zoom: 1;
    display: inline;
    text-align: center;

<head>
  <meta charset="UTF-8">
  <title>NavBar Collapse</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">   
  
<link rel='stylesheet' href='https://intranet.sanmarino.com.co/sm/css/bootstrap.css'>
<link rel='stylesheet' href='https://intranet.sanmarino.com.co/sm/css/style.css'>


  <!-- FontAwesome -->
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>

<body>
  
<div id="fh5co-page">
  <header id="fh5co-header" role="banner">
    <div class="container" style="text-align:center;">
      <div class="header-inner">
        <a href="index.php"><img src="https://getbootstrap.com/docs/3.3/assets/img/sass-less.png" style="width: 100%; max-width: 580px;"></a>
      </div>
    </div>
    
    
    <nav class="navbar affix" data-spy="affix" data-offset-top="165">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
       <i class="fas fa-bars"></i>                      
      </button>     
    </div>
    
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><i class="far fa-user"></i> Salir</a></li>
      </ul>
    </div>
  </div>
</nav>
   </header>
  </div>
  
 <div style="padding: 200px 0;">
      Contenido Cool
    </div>
  <div style="padding: 200px 0;">
      Contenido Cool
    </div>
  <div style="padding: 200px 0;">
      Contenido Cool
    </div>  
  
</body>
  <script src='https://intranet.sanmarino.com.co/sm/js/jquery.min.js'></script>
<script src='https://intranet.sanmarino.com.co/sm/js/bootstrap.min.js'></script>

I want to go from the menu on the left to center it (or justify it) horizontally.

Some may think that I haven't tried much, but believe me, I've been trying to do it for hours but my knowledge is very basic. I tried applying the property display:inlineand then text-align:center. I also played with the property justify-contentand its values center, space-aroundand space-between.

I got pretty close by applying in the css:

.navbar-nav {
    float: left;
    margin: 0;
    left: 50%;
    transform: translatex(-50%);
    position: relative;

But you lose the Logout option which is the user icon. I could play by reducing the percentage, but I don't think it's the right way to think about various resolutions.

2 Answers

Voted

Jheyman Mejia · Answer 1 · 2020-12-13T13:42:17+08:00

Use the class navbar-centerwith the following properties:

.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
  }

This way you don't need to remove or move the icon with the class navbar-rightyou mention.

You could even do it with nav justify-content-center. You can see more info about the positioning of the menus in Bootstrap on its official page

.affix-top{
   transition: top 2s ease 2s;
    -webkit-transition: top 2s ease 2s;
    -moz-transition: top 2s ease 2s;
    -o-transition: top 2s ease 2s;
}

.affix {
    top: 0px;
    width: 100%;
    z-index: 999 !important;
    padding-top: 90px;
    text-align: center;   
    background-color: #fff;
    padding: 12px 0 12px 0;
    border-bottom: 3px double rgba(0, 0, 0, 0.1);
    box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08); 
  }

  .affix+.container-fluid {
    padding-top: 300px;
  }

.navbar {   
    border: 1px solid transparent;
    background: #fff;
    border-radius: 10px;
    min-height: 0;
}
.navbar-toggle {
    position: relative;
    float: right;
    margin-right: 15px;
    padding: 10px 10px;
    margin-top: 10.5px;
    margin-bottom: 10.5px;
    background-color: #848484;  
    border: 1px solid transparent;
    border-radius: 5px;
}

#fh5co-header {
    padding: 20px 0 0 0;
}

#fh5co-header nav ul li {
    padding: 0;
    margin: 0;
    list-style: none;
    zoom: 1;
    display: inline;
    text-align: center;
    }
    
    @media (min-width: 768px) {
  .navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
  }
}

<head>
  <meta charset="UTF-8">
  <title>NavBar Collapse</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">   
  
<link rel='stylesheet' href='https://intranet.sanmarino.com.co/sm/css/bootstrap.css'>
<link rel='stylesheet' href='https://intranet.sanmarino.com.co/sm/css/style.css'>


  <!-- FontAwesome -->
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>

<body>
  
<div id="fh5co-page">
  <header id="fh5co-header" role="banner">
    <div class="container" style="text-align:center;">
      <div class="header-inner">
        <a href="index.php"><img src="https://getbootstrap.com/docs/3.3/assets/img/sass-less.png" style="width: 100%; max-width: 580px;"></a>
      </div>
    </div>
    
    
    <nav class="navbar affix" data-spy="affix" data-offset-top="165" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <div class="navbar-collapse collapse">    
    <ul class="nav navbar-nav navbar-center">
        <li><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
      
        <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><i class="far fa-user"></i> Salir</a></li>
    </ul>
  </div>
</nav> 
   </header>
  </div>
  
 <div style="padding: 200px 0;">
      Contenido Cool
    </div>
  <div style="padding: 200px 0;">
      Contenido Cool
    </div>
  <div style="padding: 200px 0;">
      Contenido Cool
    </div>  
  
</body>
  <script src='https://intranet.sanmarino.com.co/sm/js/jquery.min.js'></script>
<script src='https://intranet.sanmarino.com.co/sm/js/bootstrap.min.js'></script>

alanfcm · Answer 2 · 2020-12-13T13:14:28+08:00

Try adding margin: autoand display: tablelike this:

.affix-top{
   transition: top 2s ease 2s;
    -webkit-transition: top 2s ease 2s;
    -moz-transition: top 2s ease 2s;
    -o-transition: top 2s ease 2s;
}

.affix {
    top: 0px;
    width: 100%;
    z-index: 999 !important;
    padding-top: 90px;
    text-align: center;   
    background-color: #fff;
    padding: 12px 0 12px 0;
    border-bottom: 3px double rgba(0, 0, 0, 0.1);
    box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08); 
  }

  .affix+.container-fluid {
    padding-top: 300px;
  }

.navbar {   
    border: 1px solid transparent;
    background: #fff;
    border-radius: 10px;
    min-height: 0;
}

.navbar-nav {
  display: table;  
  float: none !important;
  margin: auto !important;
}

.navbar-toggle {
    position: relative;
    float: right;
    margin-right: 15px;
    padding: 10px 10px;
    margin-top: 10.5px;
    margin-bottom: 10.5px;
    background-color: #848484;  
    border: 1px solid transparent;
    border-radius: 5px;
}

#fh5co-header {
    padding: 20px 0 0 0;
}

#fh5co-header nav ul li {
    padding: 0;
    margin: 0;
    list-style: none;
    zoom: 1;
    display: inline;
    text-align: center;

<head>
  <meta charset="UTF-8">
  <title>NavBar Collapse</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">   
  
<link rel='stylesheet' href='https://intranet.sanmarino.com.co/sm/css/bootstrap.css'>
<link rel='stylesheet' href='https://intranet.sanmarino.com.co/sm/css/style.css'>


  <!-- FontAwesome -->
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>

<body>
  
<div id="fh5co-page">
  <header id="fh5co-header" role="banner">
    <div class="container" style="text-align:center;">
      <div class="header-inner">
        <a href="index.php"><img src="https://getbootstrap.com/docs/3.3/assets/img/sass-less.png" style="width: 100%; max-width: 580px;"></a>
      </div>
    </div>
    
    
    <nav class="navbar affix" data-spy="affix" data-offset-top="165">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
       <i class="fas fa-bars"></i>                      
      </button>     
    </div>
    
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><i class="far fa-user"></i> Salir</a></li>
      </ul>
    </div>
  </div>
</nav>
   </header>
  </div>
  
 <div style="padding: 200px 0;">
      Contenido Cool
    </div>
  <div style="padding: 200px 0;">
      Contenido Cool
    </div>
  <div style="padding: 200px 0;">
      Contenido Cool
    </div>  
  
</body>
  <script src='https://intranet.sanmarino.com.co/sm/js/jquery.min.js'></script>
<script src='https://intranet.sanmarino.com.co/sm/js/bootstrap.min.js'></script>

Center or justify Bootstrap navbar menu

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?