主页 / 问题 / 730200
Accepted
I_CaR
Asked:2020-10-13 14:43:30 +0800 CST2020-10-13 14:43:30 +0800 CST

内容不相等的 CSS 中的偏移块定位 - 如何解决代码的这种行为？

  • 772

问题是如何水平对齐块？
如果你在 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>

如何绕过/修复此代码行为？

css

2 个回答

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

    • 2
  2. Best Answer

    给你的内联块垂直对齐（例如顶部）

    • 1

相关问题