Vertical alignment and inline display

Question

Vertical alignment and inline display

Navigation

#1 by (0 votes)

0

Good afternoon!

I have the page below and for as long as I try I can not make the menu stay in line with the logo.

Where am I going wrong?

Another problem is that the logo and menu have height of 88px but the div that houses them has 120px height and what I would like is that block logo/menu was aligned middle vertically in relation to the "top" box that houses 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>

css css3

asked by anonymous 20.09.2016 / 19:26

1 answer

xdebug - xampp php7 RDS SQL SERVER AWS Amazon

score 0 · Answer 1

So, there are a lot of 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><divclass="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

From the demanded on display flex, it facilitates this kind of thing a lot;)