Не могу понять что нужно сделать что бы надпись в кнопке была по центру ( что у меня достигается путем text-align:center и line-height: равный высоте блока), но при этом где текст уходить за границы кнопки, он переносился на след. строку. Как это сделать?
<body>
<div id="Head">
<div id="Logo">
</div>
<div id="Menu">
<nav>
<div class="buttonmenu">
<a href="">
О нас
</a>
</div>
<div class="buttonmenu">
<a href="">
Новости
</a>
</div>
<div class="buttonmenu">
<a href="">
Услуги
</a>
</div>
<div class="buttonmenu">
<a href="">
Продукты
<br>
и разработки
</a>
</div>
<div class="buttonmenu">
<a href="">
Документы
</a>
</div>
<div class="buttonmenu">
<a href="">
Радионавигационные
<br>
системы и средства
</a>
</div>
<div class="buttonmenu">
<a href="">
Обратная связь
</a>
</div>
<div class="buttonmenu">
<a href="">
Контакты
</a>
</div>
<div class="buttonmenu">
<a href="">
Полезные ссылки
</a>
</div>
<div class="buttonmenu">
<a href="">
Карта сайта
</a>
</div>
</nav>
</div>
</div>
* {
margin:0px;
padding: 0px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
article, aside, footer, header, hgroup, nav, section {
display: block;
}
body{
margin: 0 auto;
font: 100%/1.5em Arial, Helvetica, sans-serif; }
#Head{
overflow: hidden;
background-color: black;
}
#Logo{
}
#Menu{
background-color: #1b2a49;
overflow: hidden;
margin: 0 auto;
}
.buttonmenu{
width: 10%;
height: 100px;
line-height: 200%;
text-align: center;
float:left;
display: inline-block;
overflow: hidden;
padding: 2px 5px;
}
.buttonmenu a {
width: 100%;
height: 100%;
text-decoration: none;
color: white;
}
.buttonmenu:hover{
background-color: pink;
opacity: 0.5;
cursor: pointer;
}
Средний
