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)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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