3

Hola estoy intentando centrar el texto como en esta plantilla :

introducir la descripción de la imagen aquí

Este es mi código :

 <header>
          <nav>
       <br> <br><br><br>
       <li style="display:inline-block;float:left; padding:10px; font-weight:bold;"><a style="color:black; " href="#">HOME</a></li>
       <li style="display:inline-block;float:left; padding:10px; font-weight:bold;"><a style="color:black;"  href="#">PRODUCT</a></li>
       <li style="display:inline-block;float:left; padding:10px; font-weight:bold;"><a style="color:black;"  href="#">ABOUT US</a></li>
       <li style="display:inline-block;float:left; padding:10px; font-weight:bold;"><a style="color:black;"  href="#">PRODUCT</a></li>
       <li style="display:inline-block; float:right; padding:10px; font-weight:bold;"><a style="color:black;"  href="#">PRODUCT</a></li>
       <li style="display:inline-block; float:right; padding:10px; font-weight:bold;"><a  style="color:black;" href="#">PRODUCT</a></li>
       <li style="display:inline-block; float:right; padding:10px; font-weight:bold;"><a style="color:black;"  href="#">PRODUCT</a></li>

       <li style="display:inline-block; float:right; padding:10px; font-weight:bold;"><a style="color:black;"  href="#">PRODUCT</a></li>

       <li style="display:inline-block; float:right; padding:10px; font-weight:bold;"><a style="color:black;"  href="#">PRODUCT</a></li>
        <center>
   <img style="position: absolute;bottom:-30px;" src="images/FreshFarms.png" width="150" alt="Logo Fresh Farms">
 </center>
     </nav>



  </header>      

¿ Alguien tiene alguna idea de como podría hacerlo?

0

3 respuestas 3

5

Es fácil poder imitar algún estilo de algún sitio web, jugando con la herramienta para desarrolladores del navegador e inspeccionando el estilo deseado.

He imitado el diseño pero distinto al código que has publicado, un poco más optimizado más limpio y sencillo.

A partir de menos de los 1000 px del ancho del navegador (responsive) debes aplicar un menú responsive, o a la vez ir modificando lo siguientes estilos (recuerdad que siempre puedes ir jugando con los estilos desde la herramienta de desarrollador o la consola del navegador)

ul.nav li + li {
  margin-left: 36px;
}

ul.nav li:nth-child(4) {
    margin-left: 275px;
}

Y entre otros ir tomando apuntes para que luego puedas crear los estilos CSS media queries

Ese detalle le queda de tarea.

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  vertical-align: middle;
}

.navbar-inner {
  position: relative;
  height: 172px;
  /*display: -ms-flexbox;*/
  /* display: -webkit-flex; */
  display: flex;
  /* -webkit-flex-direction: row; */
  /*-ms-flex-direction: row;*/
  /* flex-direction: row; */
  /* -webkit-flex-wrap: nowrap; */
  /*-ms-flex-wrap: nowrap;*/
  /* flex-wrap: nowrap; */
  /* -webkit-align-items: center; */
  /*-ms-flex-align: center;*/
  align-items: center;
  /* -webkit-justify-content: center; */
  /*-ms-flex-pack: center;*/
  /* justify-content: center; */
  /* padding: 28px 15px; */
}

div.logo {
  position: absolute;
  top: 50%;
  left: 52%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 6;
  will-change: transform;
}

ul.nav {
  width: 100%;
  text-align: center;
  list-style: none;
}

ul.nav li {
  position: relative;
  display: inline-block;
}

ul.nav li + li {
  margin-left: 36px;
}

ul.nav li:nth-child(4) {
    margin-left: 275px;
}
<header>
  <nav>
    <div class="navbar-inner">
      <div class="logo">
        <div class="brand-desktop">
          <img src="http://kinoestudio.com.mx/images/logo-109x125.png">
        </div>
      </div>
      <ul class="nav">
        <li>Home</li>
        <li>About</li>
        <li>Services</li>
      
        <li>Blog</li>
        <li>Shop</li>
        <li>Contacts</li>
      </ul>
    </div>
  </nav>
</header>

2

Si quieres seguir usando el mismo código html, utiliza la etiqueta center para englobar todo el código:

   <br> <br><br><br>

   <li style="display:inline-block;float:left; padding:10px; font-weight:bold;"><a style="color:black; " href="#">HOME</a></li>
   <li style="display:inline-block;float:left; padding:10px; font-weight:bold;"><a style="color:black;"  href="#">PRODUCT</a></li>
   <li style="display:inline-block;float:left; padding:10px; font-weight:bold;"><a style="color:black;"  href="#">ABOUT US</a></li>
   <li style="display:inline-block;float:left; padding:10px; font-weight:bold;"><a style="color:black;"  href="#">PRODUCT</a></li>
   <li style="display:inline-block; float:right; padding:10px; font-weight:bold;"><a style="color:black;"  href="#">PRODUCT</a></li>
   <li style="display:inline-block; float:right; padding:10px; font-weight:bold;"><a  style="color:black;" href="#">PRODUCT</a></li>
   <li style="display:inline-block; float:right; padding:10px; font-weight:bold;"><a style="color:black;"  href="#">PRODUCT</a></li>

   <li style="display:inline-block; float:right; padding:10px; font-weight:bold;"><a style="color:black;"  href="#">PRODUCT</a></li>

   <li style="display:inline-block; float:right; padding:10px; font-weight:bold;"><a style="color:black;"  href="#">PRODUCT</a></li>

0

Buenas amigo espero esto sea lo que buscas saludos.

la idea es usar la propiedad de css display:flex y centrar los elementos con justify-content: center; y align-items: center;

Espero te ayude

Usando las cajas flexibles CSS

La propiedad Flexible Box, o flexbox, de CSS3 es un modo de diseño que permite colocar los elementos de una página para que se comporten de forma predecible cuando el diseño de la página debe acomodarse a diferentes tamaños de pantalla y diferentes dispositivos. Para muchas aplicaciones, el modelo "caja flexible" produce una mejora sobre el modelo "bloque" porque no utiliza la propiedad float, ni hace que los márgenes del contenedor flexible interfieran con los márgenes de sus contenidos

* {
  margin: 0px;
  padding: 0px;
}
nav {
width:100%;
  display:flex;
    align-items: center;
  justify-content: center;
    background: rgb(255, 255, 255);
}
nav a {
font-size: 14px;
  outline: none;
  text-decoration: none !important;
  text-transform: none;
  font-family: arial;
  transition: all .3s ease;
}
nav a:hover {
  color: rgb(168, 142, 76) !important;
}
nav img {
  margin-left:15px;
  margin-right: 15px;
}
<header>
          <nav>
       <br> <br><br><br>
       <li style="display:inline-block;float:left; padding:10px; font-weight:bold;"><a style="color:black; " href="#">HOME</a></li>
       <li style="display:inline-block;float:left; padding:10px; font-weight:bold;"><a style="color:black;"  href="#">about</a></li>
       <li style="display:inline-block;float:left; padding:10px; font-weight:bold;"><a style="color:black;"  href="#">services</a></li>
       <img src="http://kinoestudio.com.mx/images/logo-109x125.png" alt="">
       <li style="display:inline-block;float:left; padding:10px; font-weight:bold;"><a style="color:black;"  href="#">blog</a></li>
       <li style="display:inline-block;float:left; padding:10px; font-weight:bold;"><a style="color:black;"  href="#">shop</a></li>
       <li style="display:inline-block;float:left; padding:10px; font-weight:bold;"><a style="color:black;"  href="#">contacts</a></li>
       
        <center>
   <img style="position: absolute;bottom:-30px;" src="images/FreshFarms.png" width="150" alt="Logo Fresh Farms">
 </center>
     </nav>



  </header>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.