Vertical alignment and inline display

Asked

Viewed 691 times

-1

good afternoon!

I have the page below and as much as I try I can’t get the menu to stay online with the logo.

Where am I going wrong?

Another problem is that the logo and menu have height of 88px however the div that shelters them has 120px height and what I would like is that block logo/menu aligned middle vertically in relation to the "top" box housing them.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<style>
@charset "utf-8";
/* CSS Document */

@import url('http://fonts.googleapis.com/css?family=Open+Sans');
* {
    font-family: 'Open Sans';
    margin: 0;
    padding: 0;
    box-sizing: content-box;
}

body {
    font-size: 12px;
    background-color:#F00;
    margin: 0 auto; 
    width: 1000px;
}

img {
    border: 0;
    max-width: 100%;
}

ul {
    list-style: none;
}

a, a:hover {
    text-decoration: none;
}

.topo {
    clear: both;
    position: relative;
    width: 100%;
    height: 120px;
}

.logo, .menu {
    display:inline-block;
    vertical-align:middle;
}

.logo {
    width:30%;
}

.menu {
    width:69.6%;
}

.corpo {    
    background-color:#CCC;
    border: #000 3px solid;
    border-radius: 30px 30px 0 0;
}

.menuAbrir, .menuFechar {
    display: none;
}

.menuPrincipal li {
  display:inline;
}

.menuPrincipal li a {
  display:inline-block;
  vertical-align:middle;
  width:19.6%;
  height:88.19px;
  line-height:88.19px;
  text-align:center;
  font-size: 24px;
  color: #FFF;
  transition: background-color 1s;
}

.menuPrincipal li a:hover {
  color: #F00;
  background-color:#CCC;
}

</style>
</head>
<body>
  <div class="topo">
    <div class="logo"><img src="_img/logo.jpg" /></div>
    <div class="menu">
      <img class="menuAbrir"  src="_img/btn-menu.png" width="50px;" title="Abrir Menu" />
      <div class="menuNav"> 
        <a class="menuFechar"><img  src="_img/btn-close.png" width="30px;" title="Abrir Menu" /></a>
        <ul class="menuPrincipal">
          <li> <a href="index.php">Home</a> </li>
          <li> <a href="media.php">Media</a> </li>
          <li> <a href="contato.php?form">Contato</a> </li>
          <li> <a href="pedido.php">Pedido</a> </li>
          <li> <a href="sobre.php">Sobre</a> </li>
        </ul>
      </div>
    </div>
  </div>
</body>
</html>

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

css css3
  • 1

    Could you post an image of how you are please?

  • I didn’t quite understand your doubt, I ran your code and it’s aligned... It could be because of the logo, if I can upgrade it too..

  • I put it at the end of the question. Note that the logo and menu are glued to the top. But they are inside a div "top" that is 120px high and the logo and the menu are 88;19px only and I can’t center them

  • at the end of the question

1 answer

0

So, there are several problems in your layout, but I would solve this problem by putting a fixed value in the height of the div logo, below.

@charset "utf-8";

/* CSS Document */

@import url('http://fonts.googleapis.com/css?family=Open+Sans');
* {
  font-family: 'Open Sans';
  margin: 0;
  padding: 0;
  box-sizing: content-box;
}

body {
  font-size: 12px;
  background-color: #F00;
  margin: 0 auto;
  width: 1000px;
}

img {
  border: 0;
  max-width: 100%;
}

ul {
  list-style: none;
}

a,
a:hover {
  text-decoration: none;
}

.topo {
  clear: both;
  position: relative;
  width: 100%;
  height: auto;
  border: solid 1px;
}

.logo,
.menu {
  display: inline-block;
  vertical-align: middle;
}

.logo {
  width: 30%;
  height: 88px;
}

.menu {
  width: 69.6%;
}

.corpo {
  background-color: #CCC;
  border: #000 3px solid;
  border-radius: 30px 30px 0 0;
}

.menuAbrir,
.menuFechar {
  display: none;
}

.menuPrincipal li {
  display: inline;
}

.menuPrincipal li a {
  display: inline-block;
  vertical-align: middle;
  width: 19.6%;
  height: 88.19px;
  line-height: 88.19px;
  text-align: center;
  font-size: 24px;
  color: #FFF;
  transition: background-color 1s;
}

.menuPrincipal li a:hover {
  color: #F00;
  background-color: #CCC;
}
<div class="topo">
  <div class="logo"><img src="http://i.stack.imgur.com/uUjdf.jpg" /></div>
  <div class="menu">
    <img class="menuAbrir" src="_img/btn-menu.png" width="50px;" title="Abrir Menu" />
    <div class="menuNav">
      <a class="menuFechar"><img src="_img/btn-close.png" width="30px;" title="Abrir Menu" /></a>
      <ul class="menuPrincipal">
        <li> <a href="index.php">Home</a> </li>
        <li> <a href="media.php">Media</a> </li>
        <li> <a href="contato.php?form">Contato</a> </li>
        <li> <a href="pedido.php">Pedido</a> </li>
        <li> <a href="sobre.php">Sobre</a> </li>
      </ul>
    </div>
  </div>
</div>

Demo - Jsfiddle

Gives a sought after on flex display, it greatly facilitates this kind of thing ;)

  • It is. But this way you did, note that it was not possible to put the Middle logo and menu relative to the top keeping the top at 120px and the logo and menu at 88px

  • So I think I did it! I just don’t think it would be the most coherent way. But I did it. I added margin-top: 15px; the logo and menu pushing them down until they reach the middle. What do you think?

  • @Carlosrocha So Carlos, I still don’t understand what you want! If you want to put your modified code in jsfiddle.net, and send the link here in the comment I take a look.

  • Look, I have a div with 1000px X 120px ok? Inside it I have a 130x88 figure and another 960x88 div that houses the ul of the menu. Correct? What I want is just to vertically align this image and this div (which are display:inline to each other) within the parent div. But I did it, doing 120-88 = 32, 32/2 = 16. I took the image and the menu and put margin-top: 16px.

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.