Para hacer que un sitio web responda, lo inteligente es usar Bootstrap. Al usar Bootstrap, podemos hacer que nuestro sitio web se vea bien y responda.
Hay dos formas de establecer una imagen o un logotipo en el centro de una barra de navegación receptiva. Están:
- Usando CSS
- Usando Bootstrap
Ahora vamos a entender cada uno de ellos.
Usando CSS: en este método, usamos nuestro propio estilo para centrar la imagen en la barra de navegación. Vamos a incrustar el código CSS en el código HTML . Aquí le hemos dado la propiedad flexible a nuestra marca (imagen o logotipo), el ancho del 100% y el contenido justificado como el centro . Estas propiedades establecen nuestro logotipo en el centro de la barra de navegación.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous" />
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style type="text/css">
.navbar-brand {
display: flex;
width: 100%;
justify-content: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg
navbar-dark bg-primary">
<!-- Brand and toggle get grouped
for better mobile display -->
<a class="navbar-brand" href="#">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200921155935/gfglogo-300x39.png"
width="300" height="50" alt="" />
</a>
<button class="navbar-toggler" type="button"
data-toggle="collapse" data-target=
"#bs-example-navbar-collapse-1"
aria-controls="bs-example-navbar-collapse-1"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Anything inside of collapse
navbar-collapse goes into the "hamburger" -->
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">
Home
<span class="sr-only">
(current)
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Item1
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Item2
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Item3</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity=
"sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.1/web-animations.min.js">
</script>
</body>
</html>
Producción:
Podemos ver que el logotipo de GeeksforGeeks está alineado en el centro de la barra de navegación, mientras que todos los demás elementos de la barra de navegación están a la derecha.
Usando Bootstrap: en este método, podemos evitar escribir código CSS adicional. Solo necesitamos agregar una etiqueta div con la clase como contenedor y colocar la marca de la barra de navegación (imagen o logotipo) dentro de este div. Después de eso, solo necesitamos agregar la clase mx-auto a la clase navbar-brand. La clase mx-auto es una clase Bootstrap que solo ajusta el margen en los lados izquierdo y derecho para alinear el contenido en el centro .
Ejemplo:
<!DOCTYPE html> <html> <head> <title>Navbar</title> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity= "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" /> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <link rel="stylesheet" type="text/css" href="gfg.css" /> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <!-- Brand and toggle get grouped for better mobile display --> <div class="container"> <a class="navbar-brand mx-auto" href="#"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200921155935/gfglogo-300x39.png" width="200" height="50" alt="" /> </a> </div> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target ="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <!-- Anything inside of collapse navbar-collapse goes into the "hamburger" --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#"> Home<span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#">Item1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Item2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Item3</a> </li> </ul> </div> </nav> <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.1/web-animations.min.js"> </script> </body> </html>
Producción:
Podemos ver que el logotipo de GeeksforGeeks está alineado con el centro de la barra de navegación, mientras que todos los demás elementos de la barra de navegación están a la derecha. De estas dos formas, podemos crear una imagen en el centro de una barra de navegación receptiva.
Publicación traducida automáticamente
Artículo escrito por vasireddykomalkumar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA