Comment aligner verticalement un formulaire et une image

Question

Je me bats avec le balisage html et css nécessaire pour mettre une barre de navigation en ligne avec mon logo. Voici ce que j'ai (doit être vu grand écran):

http://jsfiddle.net/ewz5r7k6/3/embedded/result/

HTML

<header> 
    <nav class="container"> <a href="index.html"><img src="http://s2.hulkshare.com/song_images/original/7/0/6/706218dbe06e5490bacd92adf773c870.jpg?dd=1388552400"></a> 

     <form class="search"> 
      <input type="text" class="input text" placeholder="Keyword"> 
      <input type="text" class="input text" placeholder="Location"> 
      <input type="submit" class="btn submit"> 
     </form> 
    </nav> 
</header> 

CSS

html, body { 
    height: 100%; 
} 
a { 
    text-decoration: none; 
} 
.container { 
    padding-left: 40px; 
    padding-right: 40px; 
} 
header { 
    padding-top: 30px; 
    padding-bottom: 30px; 
} 
header nav { 
    height: 50px; 
    line-height: 50px; 
} 
header ul { 
    float: right; 
} 
header ul li { 
    display: inline-block; 
} 
header ul li a { 
    color: rgb(58, 64, 70); 
    display: block; 
    font-family:'Whitney SSm A', 'Whitney SSm B', Helvetica, Arial, sans-serif; 
    font-size: 13px; 
    height: 21px; 
    line-height: 21px; 
    margin-left: 25px; 
    text-decoration: none; 
    padding-left:15px; 
    padding-right:15px; 
} 
header ul li a.active { 
    color: #f16162; 
} 
header img { 
    height: 50px; 
} 
.input { 
    margin:0; 
    padding: 10px 12px; 
    font-weight: 300; 
    border-radius: 3px; 
    box-sizing: border-box; 
    vertical-align:middle; 
} 
.search { 
    display: inline-block; 
} 
.search .text { 
    width: 300px; 
    margin-right: 30px; 
    ; 
} 
.search .submit { 
    background-size: 18px 18px; 
    background-repeat: no-repeat; 
    background-position: center; 
    font-size: 0; 
    height: 38px; 
    width: 60px; 
    vertical-align:middle; 
} 
.btn { 
    border-radius: 3px; 
    background-color: black; 
    color: #fff; 
    border: 0; 
    text-decoration: none; 
} 
.right { 
    float:right; 
} 

1. est la plus propre, la plus façon sémantique de la réalisation cette mise en page, en utilisant display:inline-block; pour le formulaire? Il me semble que je pourrais tout laisser flotter à gauche, je ne sais pas quelle est la meilleure approche.

2. Comment est-ce que je dois centrer verticalement le formulaire dans la barre de navigation, line-height est le bon balisage pour cela, ou y a-t-il un meilleur moyen?

Answer 1

Il n'y a pas de "meilleure" façon de placer les éléments côte à côte. Cela dépend totalement de la situation, mais inline-block et float: left sont deux options viables. Pour des raisons de commodité, je tiens généralement avec des blocs en ligne jusqu'à ce que j'ai vraiment besoin de flotter. Les flotteurs ont tendance à exiger des règles supplémentaires pour éviter les effets secondaires, comme devoir les éliminer ou régler les problèmes de débordement.

Le centrage vertical lors de l'utilisation du bloc en ligne est généralement effectué avec vertical-align, bien que cela dépende beaucoup de la situation. L'alignement vertical est l'une des choses les plus ennuyantes en CSS si vous me demandez. Pour votre exemple, cependant, il s'est avéré assez simple:

.search { 
    display: inline-block; 
    vertical-align: top; 
} 

Est suffisant pour que la forme s'aligne avec le logo.

Answer 2

suffit de positionner la balise img à aligner verticalement milieu va résoudre le problème

img 
{ 
vertical-align:middle; 
} 

Voir DEMO

voir ces liens pour une meilleure compréhension: float:left; vs display:inline; vs display:inline-block; vs display:table-cell;