2

Проблема В чем проблема ?Когда в каком то диве много текста , рядом стоящие дивы съезжают.

*{
    margin: 0px;
    padding: 0px;
    text-decoration: none;
}
.menu div {
width: 120px;
display: inline-block;
background-color: #863232;
white-space: pre-wrap;
text-align: center;
height: 50px;
}

.menu {
background-color: #323232;
height: auto;
left: 20px;
margin-top: 20px;
height: 50px;
}
.menu div a {
text-align: center;
font-size: 20px;
height: 100%;
color: #000;
}

    <div class="menu">
        <div title="TEST 1"><a href="">TEST 1</a></div>
        <div title='TEST TEST TEST 2'><a href="">TEST TEST TEST 2</a></div>
        <div title='TEST TEST TEST 2'><a href="">TEST TEST TEST 2</a></div>
        <div title="TEST 1"><a href="">TEST 1</a></div>

    </div>  

1 ответ 1

4

Блоки display: inline-block; по-умолчанию имеют выравнивание - baseline, поэтому стоит задать выравнивание по серединке - vertical-align: middle; :

*{
    margin: 0px;
    padding: 0px;
    text-decoration: none;
}
.menu div {
width: 120px;
display: inline-block;
vertical-align: middle;
background-color: #863232;
white-space: pre-wrap;
text-align: center;
height: 50px;
}

.menu {
background-color: #323232;
height: auto;
left: 20px;
margin-top: 20px;
height: 50px;
}
.menu div a {
text-align: center;
font-size: 20px;
color: #000;
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
<div class="menu">
    <div title="TEST 1"><a href="">TEST 1</a></div>
    <div title='TEST TEST TEST 2'><a href="">TEST TEST TEST 2</a></div>
    <div title='TEST TEST TEST 2'><a href="">TEST TEST TEST 2</a></div>
    <div title="TEST 1"><a href="">TEST 1</a></div>

</div>

4
  • 1
    При этом как можно еще отцентрировать текст когда стоит display:block;? ` .menu div a { display: block; font-size: 20px; height: 100%; color: #000; }`
    – Gigabait
    3 мая 2017 в 14:27
  • добавила и выравнивание текста. это как один из вариантов
    – SVE
    3 мая 2017 в 14:52
  • А можно ли как нибудь оставить height: 100%; либо растянуть на всю кнопку , и при этом оставить текст по центру ?
    – Gigabait
    3 мая 2017 в 16:09
  • нет, проще тогда использовать flex
    – SVE
    3 мая 2017 в 16:16

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.