響應式垂直中心對齊文本

我刪除了很多代碼，所以下面是最低限度。響應式垂直中心對齊文本

我該如何對齊下面的文本，使其既可以垂直/水平居中，也可以在響應時自動調整？

我排除@media css。但是，如果不改變我所擁有的太多東西，是否有辦法讓文本即使在碰到兩條甚至三條線時也能居中？

當你在下面寫下代碼片段時，注意選項1和選項2如何不居中。

我留在JS中，所以你可以看到我在做什麼，它只是一個導航。

//Make first one active 
 
$(".tabs > li ").first().addClass("activeTab"); 
 

 
$(".tabs > li").click(function(e) { 
 

 
    $(".activeTab ").removeClass("activeTab"); 
 

 
    var _this = $(this); 
 
    _this.addClass("activeTab"); 
 
});

.tabs_accordion { 
 
    display: block; 
 
    margin: 0 auto; 
 
    max-width: 1200px; 
 
} 
 
.tabs_accordion > input { 
 
    display: none; 
 
} 
 
.tabs_accordion ul.tabs { 
 
    display: table; 
 
    width: 100%; 
 
    display: none; 
 
    background-color: green; 
 
    padding: 0; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
    -moz-user-select: -moz-none; 
 
    -ms-user-select: none; 
 
    -webkit-user-select: none; 
 
    user-select: none; 
 
    color: #7EE8FF; 
 
    font-size: 16px; 
 
} 
 
.tabs_accordion ul.tabs li { 
 
    display: table-cell; 
 
    cursor: pointer; 
 
    width: 238px; 
 
    position: relative; 
 
} 
 
.tabs_accordion ul.tabs li label:active { 
 
    background-color: blue; 
 
} 
 
.tabs_accordion ul.tabs li label { 
 
    display: block; 
 
    height: 74px; 
 
    padding: 20px; 
 
    text-align: center; 
 
    border-left: 2px solid yellow; 
 
    margin: 0px 0; 
 
    box-sizing: border-box; 
 
    cursor: pointer; 
 
    font-weight: bold; 
 
} 
 
.tabs_accordion ul.tabs li label:focus { 
 
    background-color: blue; 
 
} 
 
.tabs_accordion ul.tabs li label:active { 
 
    background-color: blue; 
 
} 
 
.tabs_accordion ul.tabs li:hover { 
 
    background-color: blue; 
 
    color: #FFFFFF; 
 
} 
 
.tabs_accordion div.content > label { 
 
    display: block; 
 
    background-color: green; 
 
    padding: 20px; 
 
    margin-bottom: 1em; 
 
    cursor: pointer; 
 
    -moz-user-select: -moz-none; 
 
    -ms-user-select: none; 
 
    -webkit-user-select: none; 
 
    user-select: none; 
 
    text-align: center; 
 
} 
 
.tabs_accordion div.content > div { 
 
    display: none; 
 
    padding: 10px; 
 
    margin-bottom: 1em; 
 
} 
 
.tabs_accordion ul.tabs { 
 
    display: table; 
 
} 
 
.tabs_accordion div.content > label { 
 
    display: none; 
 
} 
 
.tabs_accordion div.content > div { 
 
    margin-bottom: 0; 
 
} 
 
/* For Java */ 
 

 
/* ARROW Controls */ 
 

 
Controls Active .tabs_accordion [id^="tab"]:checked + label { 
 
    background: blue; 
 
    color: #fff; 
 
} 
 
.activeTab { 
 
    background-color: blue; 
 
} 
 
.tabs_accordion ul.tabs li label:after { 
 
    content: ''; 
 
    width: 0; 
 
    height: 0; 
 
    top: 74px; 
 
    left: 50%; 
 
    bottom: 0; 
 
    margin-left: -20px; 
 
    border-color: blue transparent transparent transparent; 
 
    border-style: solid; 
 
    position: absolute; 
 
    border-width: 20px; 
 
    display: none; 
 
} 
 
.tabs_accordion ul.tabs li:hover label:after, 
 
.tabs_accordion ul.tabs li.activeTab label:after { 
 
    display: block; 
 
} 
 
.tabs_accordion ul.tabs li:hover label { 
 
    border-left-color: transparent; 
 
} 
 
.tabs_accordion ul.tabs li:hover + li > label { 
 
    border-left-color: transparent; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="tabs_accordion"> 
 
    <input type="radio" name="tabs" value="tab_1" id="tab_1_content_control" checked="checked" tabindex="0" /> 
 
    <input type="radio" name="tabs" value="tab_2" id="tab_2_content_control" tabindex="0" /> 
 
    <input type="radio" name="tabs" value="tab_3" id="tab_3_content_control" tabindex="0" /> 
 

 
    <ul class="tabs"> 
 
    <li> 
 
     <label for="tab_1_content_control">Option 1</label> 
 
    </li> 
 
    <li> 
 
     <label for="tab_2_content_control">Option two</label> 
 
    </li> 
 
    <li> 
 
     <label for="tab_3_content_control">Optionofand optionss shdfkshdkfh</label> 
 
    </li> 
 
    </ul> 
 
    <div class="content"> 
 

 
    <label for="tab_1_content_control">Option 1</label> 
 
    <label for="tab_2_content_control">Option two</label> 
 
    <label for="tab_3_content_control">Optionofand optionss shdfkshdkfh</label> 
 

 
    </div> 
 
</div>

來源

2015-12-22 jaycss88

，您所要做的事情就是移除標籤的padding，使line-height相同標籤的height。

這是當你的案例中只有一行文字時可以使用的技巧之一。

代碼：

.tabs_accordion ul.tabs li label { 
     display: block; 
     height: 74px; 
     line-height:74px; 
     text-align: center; 
     border-left: 2px solid yellow; 
     margin: 0px 0; 
     box-sizing: border-box; 
     cursor: pointer; 
     font-weight: bold; 
}

例：

//Make first one active 
 
$(".tabs > li ").first().addClass("activeTab"); 
 

 
$(".tabs > li").click(function(e) { 
 

 
    $(".activeTab ").removeClass("activeTab"); 
 

 
    var _this = $(this); 
 
    _this.addClass("activeTab"); 
 
});

.tabs_accordion { 
 
    display: block; 
 
    margin: 0 auto; 
 
    max-width: 1200px; 
 
} 
 
.tabs_accordion > input { 
 
    display: none; 
 
} 
 
.tabs_accordion ul.tabs { 
 
    display: table; 
 
    width: 100%; 
 
    display: none; 
 
    background-color: green; 
 
    padding: 0; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
    -moz-user-select: -moz-none; 
 
    -ms-user-select: none; 
 
    -webkit-user-select: none; 
 
    user-select: none; 
 
    color: #7EE8FF; 
 
    font-size: 16px; 
 
} 
 
.tabs_accordion ul.tabs li { 
 
    display: table-cell; 
 
    cursor: pointer; 
 
    width: 238px; 
 
    position: relative; 
 
} 
 
.tabs_accordion ul.tabs li label:active { 
 
    background-color: blue; 
 
} 
 
.tabs_accordion ul.tabs li label { 
 
    display: block; 
 
    height: 74px; 
 
    line-height:74px; 
 
    text-align: center; 
 
    border-left: 2px solid yellow; 
 
    margin: 0px 0; 
 
    box-sizing: border-box; 
 
    cursor: pointer; 
 
    font-weight: bold; 
 
} 
 
.tabs_accordion ul.tabs li label:focus { 
 
    background-color: blue; 
 
} 
 
.tabs_accordion ul.tabs li label:active { 
 
    background-color: blue; 
 
} 
 
.tabs_accordion ul.tabs li:hover { 
 
    background-color: blue; 
 
    color: #FFFFFF; 
 
} 
 
.tabs_accordion div.content > label { 
 
    display: block; 
 
    background-color: green; 
 
    padding: 20px; 
 
    margin-bottom: 1em; 
 
    cursor: pointer; 
 
    -moz-user-select: -moz-none; 
 
    -ms-user-select: none; 
 
    -webkit-user-select: none; 
 
    user-select: none; 
 
    text-align: center; 
 
} 
 
.tabs_accordion div.content > div { 
 
    display: none; 
 
    padding: 10px; 
 
    margin-bottom: 1em; 
 
} 
 
.tabs_accordion ul.tabs { 
 
    display: table; 
 
} 
 
.tabs_accordion div.content > label { 
 
    display: none; 
 
} 
 
.tabs_accordion div.content > div { 
 
    margin-bottom: 0; 
 
} 
 
/* For Java */ 
 

 
/* ARROW Controls */ 
 

 
Controls Active .tabs_accordion [id^="tab"]:checked + label { 
 
    background: blue; 
 
    color: #fff; 
 
} 
 
.activeTab { 
 
    background-color: blue; 
 
} 
 
.tabs_accordion ul.tabs li label:after { 
 
    content: ''; 
 
    width: 0; 
 
    height: 0; 
 
    top: 74px; 
 
    left: 50%; 
 
    bottom: 0; 
 
    margin-left: -20px; 
 
    border-color: blue transparent transparent transparent; 
 
    border-style: solid; 
 
    position: absolute; 
 
    border-width: 20px; 
 
    display: none; 
 
} 
 
.tabs_accordion ul.tabs li:hover label:after, 
 
.tabs_accordion ul.tabs li.activeTab label:after { 
 
    display: block; 
 
} 
 
.tabs_accordion ul.tabs li:hover label { 
 
    border-left-color: transparent; 
 
} 
 
.tabs_accordion ul.tabs li:hover + li > label { 
 
    border-left-color: transparent; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="tabs_accordion"> 
 
    <input type="radio" name="tabs" value="tab_1" id="tab_1_content_control" checked="checked" tabindex="0" /> 
 
    <input type="radio" name="tabs" value="tab_2" id="tab_2_content_control" tabindex="0" /> 
 
    <input type="radio" name="tabs" value="tab_3" id="tab_3_content_control" tabindex="0" /> 
 

 
    <ul class="tabs"> 
 
    <li> 
 
     <label for="tab_1_content_control">Option 1</label> 
 
    </li> 
 
    <li> 
 
     <label for="tab_2_content_control">Option two</label> 
 
    </li> 
 
    <li> 
 
     <label for="tab_3_content_control">Optionofand optionss shdfkshdkfh</label> 
 
    </li> 
 
    </ul> 
 
    <div class="content"> 
 

 
    <label for="tab_1_content_control">Option 1</label> 
 
    <label for="tab_2_content_control">Option two</label> 
 
    <label for="tab_3_content_control">Optionofand optionss shdfkshdkfh</label> 
 

 
    </div> 
 
</div>

來源

2015-12-22 22:56:57

這樣的作品，但它並不能幫助時，我有一個以上的線。在進行響應時，一些鏈接會轉到兩條甚至三條線。您提供的代碼可以看到浮動在塊下面的文本。 – jaycss88

噢，這太糟糕了，我考慮去掉'height'並調整以它爲中心的'padding'，但這也需要你調整箭頭的頂部屬性以使其正確顯示。最後，我選擇了「行高」解決方案。 –

響應式垂直中心對齊文本

回答

相關問題