0

Tengo este menú en la cabecera de mi página:

menú de mi cabecera .

He marcado en azul los objetos (que estan todos contenidos en el mismo div) para que se vea claramente como por defecto se alinean usando como referencia el punto mas alto del objeto. Si quisiera usar el punto más bajo, o el punto medio, que propiedad debo tocar?

Gracias de antemano

EDITO: Añado mi codigo:

<!DOCTYPE html> 
<html>
<head>
<meta charset=" UTF-8">
<title> Title </title>
<style type="text/css">
body {
  margin: 0px;
  font-family: #; font-size: #;
}
#pageTop {
  background: url(style/headerSliver.png) repeat-x;
  heigh: 90px;
}
#pageTop > #pageTopWrap {
  width: 1000px;
  height: 90px;
  margin: 0px auto;
}
#pageTop > #pageTopWrap > #pageTopLogo {
  height: 100px;
  width: 100px;
  margin: 0px;
  float: left;
}
#pageTop > #pageTopWrap > #pageTopRest {
  float: right;
  height: 90px;
  width: 900px;
  margin: 0px;
}
#pageTop > #pageTopWrap > #pageTopRest > #pageTopRestTop {
  height: 42px;
  margin: 2px;
  background: #FF0004;
}
#pageTop > #pageTopWrap > #pageTopRest > #pageTopRestBottom {
  height: 42px;
  margin: 2px;
}
#pageTop > #pageTopWrap > #pageTopRest > #pageTopRestBottom > div {
  margin-top: 8px;
  padding: 4px;
}
#pageTop > #pageTopWrap > #pageTopRest > #pageTopRestBottom > div > a {
  display: block;
  float: left;
  color: #CDCCCD;
  text-decoration: none;
  margin: 0px 10px;
}
#pageTop > #pageTopWrap > #pageTopRest > #pageTopRestBottom > div > a:hover {
  font-weight: bold;
}
</style>                  
</head> 
<body>
<div id="pageTop">
  <div id="pageTopWrap">
    <div id="pageTopLogo">
      <a href="#"><img src="images/logo.png" alt="logo"></a>
    </div>
    <div id="pageTopRest">
      <div id="pageTopRestTop">

      </div>
      <div id="pageTopRestBottom">
        <div>
          <a href="#"><img src="images/home.png"></img></a>
          <a href="#">Button1</img></a>
          <a href="#">Button2</img></a>
          <a href="#">Button3</img></a>
          <a href="#">Button4</img></a>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="pageMiddle"></div>
<div id="pageBottom"></div>
</body>
</html>
2
  • 1
    vertical-align
    – user7176
    Commented el 7 mar. 2019 a las 12:48
  • vertical-align no te va a funcionar porque es para elementos inline o celdas de tablas y tus enlaces tienen un display:block. Podrías usar display:inline-block, también tendrías que quitar el float:left, ya que los elementos flotados se convierten en elementos de bloque
    – user7176
    Commented el 8 mar. 2019 a las 7:32

2 respuestas 2

0

Para lograr eso puedes usar la propiedad vertical-align

Si el navbar de tu pagina tiene un height definido, esta propiedad deja de aplicar el efecto deseado y entonces también deberías de añadir un margin-top para compensar el height del nav eso si tu intención es la de mostrar al bottom del nav los menús

Si ejecutas el ejemplo veras como el primer menú se alinea por defecto y el segundo menú se alinea al bottom.

div {
  display: inline;
  background: white;
  vertical-align: sub;
}
#naver div{
  vertical-align: baseline !important;
}
nav {
 background: black;
}
<nav id="naver">
<div>menu1</div>
<div>menu1</div>
<div>menu1</div>
<div>menu1</div>
</nav>
<br/>
<br/>
<br/>
<nav>
  <div>menu1</div>
  <div>menu1</div>
  <div>menu1</div>
  <div>menu1</div>
  <div>menu1</div>
</nav>

Añado el ejemplo usando tu código:

body {
  margin: 0px;
  font-family: #; font-size: #;
  width: 100%;  /*Tienes que decirle al body que ocupe el 100% de la pagina*/
}
#pageTop {
  background: url(style/headerSliver.png) repeat-x;
  width: 100%; /*El nav ocupa el 100% de la pagina*/
  background: #FF0004;
  height: 100px; /*Decirle que ocupa la misma altura que la imagen*/
}
#pageTopLogo {
  height: 100px;
  width: 100px;
  margin: 0px;
  display: inline;
}
#menuTop {
  display: inline; /*Decirle siempre inline para que se renderize bien*/
  background: white;
  vertical-align: super; /*Alinear bien el div abajo*/
}
#menuTop a {
  background: gray;
  margin: 0px 10px;
  color: black;
  vertical-align: middle; /*Alinear el enlaze en el medio del div*/
  display: inline;
}
<!DOCTYPE html> 
<html>
<head>
<meta charset=" UTF-8">
<title> Title </title>           
</head> 
<body>
<nav id="pageTop">
  <!-- Alerta! recuerda que los elementos img se autocierran! -->
  <div id="pageTopLogo">
    <a href="#"><img src="https://via.placeholder.com/100" alt="logo"/></a>
  </div>
  <div id="menuTop">
    <a href="#"><img src="images/home.png"/></a>
    <a href="#">Button1</a>
    <a href="#">Button2</a>
    <a href="#">Button3</a>
    <a href="#">Button4</a>
  </div>
</nav>
<div id="pageMiddle"></div>
<div id="pageBottom"></div>
</body>
</html>

Si lo que quieres es centrarlo en el medio tu respuesta está aquí:

1
  • Gracias por la respuesta pero no consigo lo que quiero :( edito y añado una copia de mi texto para ver si alguien me puede ayudar Commented el 7 mar. 2019 a las 20:06
0

Para lo que queres hacer una buena alternativa es usar flexbox. Por ejemplo

#pageTop > #pageTopWrap > #pageTopRest > #pageTopRestBottom {
    height: 42px;
    margin: 2px;
    margin-top: 8px;
    padding: 4px;
    display: flex;
    align-items: flex-end;
}
<div id="pageTopRestBottom">
    <a href="#"><img src="images/home.png"></img></a>
    <a href="#">Button1</img></a>
    <a href="#">Button2</img></a>
    <a href="#">Button3</img></a>
    <a href="#">Button4</img></a>
</div>

modificando la propiedad align-items vas a poder hacer la modificación que deseas

Podes ver la documentación de flexbox en: https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout

Para hacer pruebas de manera rápida y visual: http://the-echoplex.net/flexyboxes/

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.