The question is how to align the blocks horizontally?
If you take two lines in button_text or one, then everything will be fine, but if there are two in one and one in the second, then the following shift occurs:

#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>

How to bypass \ fix this code behavior?

  • If there are no more than two lines, then overflow: hidden for links. - Artem Gorlachev

2 answers 2

Add vertical-align to your inline blocks (for example, top)

     #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>