0

Вопрос в том, как выровнять блоки по горизонтали?
Если брать две строки в button_text или одну, то всё будет нормально, но если в одной две, а во второй одна, то происходит следующий сдвиг:

    #buttons_block {
        position: relative;
        margin: 0px 0px 0px 50%;
        left: -50%;
        height: auto;
        width: 100%;
        z-index: 10;
        border: solid 1px #00ff00;
        text-align: center;


    }
    
    .button {
        text-align: center;
        margin-bottom: 16px;
        display:inline-block;
        padding-right: 8px;
        padding-left: 8px;
		
    }
    
    .button a {
        display:inline-block;
        border: solid 1px #000000;
        border-radius: 4px;
        cursor: pointer;
        position: relative;
        z-index: 11;
        padding: 0px 4px 0px 8px;
        background-color: #006294;
        box-shadow: 2px 2px 3px 0px #9c9c9c;
        cursor: pointer;
        color: #ffffff;
        transition: background-color 0.5s;
        width: 230px;
	    height: 56px;

    }
    
    .button a:hover {
        background-color: #0088cc;
        transition: background-color 0.5s;
        opacity: 1;
    }
    
    .button_text {
        font: normal 17px 'Trebuchet MS';
        color: #ffffff;
        text-shadow: 1px 1px 0px #000000;
        position: relative;
        top: 4px;
        padding-left: 0px;
        line-height: 22px;
		display:inline-block;

    }
    
<div id="buttons_block">
    <div class="button"><a href="#" target="_self" style="text-decoration: none;"><span class="button_text">Онлайн<br>(дистанционное обучение)</span></a></div>
    <div class="button"><a href="#" target="_self" style="text-decoration: none;"><span class="button_text" style="line-height:46px;">Очно</span></a></div>

</div>

Как обойти\исправить данное поведение кода?

1
  • Если больше двух строчек не будет, то overflow: hidden для ссылок. 13 окт 2017 в 6:52

2 ответа 2

2

#buttons_block {
        position: relative;
        margin: 0px 0px 0px 50%;
        left: -50%;
        height: auto;
        width: 100%;
        z-index: 10;
        border: solid 1px #00ff00;
        text-align: center;
        display: flex;
        justify-content: center;
        padding: 16px 0;
    }
    
    .button {
        padding-right: 8px;
        padding-left: 8px;
    }
    
    .button a {
        display:inline-block;
        border: solid 1px #000000;
        border-radius: 4px;
        cursor: pointer;
        position: relative;
        z-index: 11;
        /*min-height:48px;*/
        padding: 0px 4px 0px 8px;
        /*background-color:#a8e2ff;*/
        background-color: #006294;
        box-shadow: 2px 2px 3px 0px #9c9c9c;
        cursor: pointer;
        /*font:normal 18px 'Trebuchet MS';*/
        color: #ffffff;
        /*text-shadow: -1px -1px 0px #000000;*/
        transition: background-color 0.5s;
        width: 230px;
	      height: 56px;

    }
    
    .button a:hover {
        background-color: #0088cc;
        transition: background-color 0.5s;
        opacity: 1;
    }
    
    .button_text {
        font: normal 17px 'Trebuchet MS';
        color: #ffffff;
        text-shadow: 1px 1px 0px #000000;
        position: relative;
        top: 4px;
        padding-left: 0px;
        line-height: 22px;
		display:inline-block;

    }
<div id="buttons_block">
    <div class="button"><a href="#" target="_self" style="text-decoration: none;"><span class="button_text">Онлайн<br>(дистанционное обучение)</span></a></div>
    <div class="button"><a href="#" target="_self" style="text-decoration: none;"><span class="button_text" style="line-height:46px;">Очно</span></a></div>

</div>

1

Добавьте Вашим инлайн-блокам vertical-align (например, top)

Ваш ответ

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

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