[英]How can I vertically align the text on these CSS buttons?
JSFiddle: https ://jsfiddle.net/u7Lm5sjp/
我有一些鏈接,例如:
<div class="splash_button_row">
<span>
<a href="www.google.com" class="splash_button">label 4 label 4 label 4 </a>
<a href="www.google.com" class="splash_button">label 2</a>
<a href="www.google.com" class="splash_button">label 5 label 5label 5</a>
<a href="www.google.com" class="splash_button">label 5 label 5label 5label 5 label 5label 5</a>
</span>
</div>
還有一堆.css,例如:
.splash_button {
background: linear-gradient(to bottom, #3498DB, #2980B9) repeat scroll 0% 0% #3498DB;
border-radius: 30px;
text-shadow: 6px 4px 4px #666;
box-shadow: 2px 2px 3px #666;
font-family: Georgia;
color: #FFF;
padding: 10px 20px;
border: 2px solid #216E9E;
text-decoration: none;
display: inline-block;
margin: 10px;
white-space: normal !important;
word-wrap: break-word;
max-width: 130px !important;
text-align: center;
font-size: 20px;
height: 65px;
vertical-align: middle;
}
這里的關鍵是:
height: 65px;
vertical-align: middle;
這兩個屬性似乎在相互斗爭。 如果我設置了vertical-align: middle;
文本全部對齊,並在其周圍均勻地填充(這就是我想要的)。 但是當我設置height: 65px;
為了使所有按鈕的大小相同,文本似乎被推到了按鈕的頂部。
如何使所有按鈕具有相同(設置)的大小,又如何使其中的文本與“按鈕”的中心垂直對齊?
編輯:
我已經閱讀了這個問題,但沒有回答我的問題。 我的按鈕有多行,因此具有行高的技巧不起作用,並且我的按鈕必須是嵌入式元素,因此具有flex的技巧不起作用。 我的按鈕也需要隔開,但是表格解決方案似乎阻止了這一點-但我仍然在玩這個。
將顯示更改為table-cell,以使垂直aligm中線起作用。
.splash_button_row { display: table; border-collapse: separate; border-spacing: 15px; } .splash_button { background: #3498db; background-image: -webkit-linear-gradient(top, #3498db, #2980b9); background-image: -moz-linear-gradient(top, #3498db, #2980b9); background-image: -ms-linear-gradient(top, #3498db, #2980b9); background-image: -o-linear-gradient(top, #3498db, #2980b9); background-image: linear-gradient(to bottom, #3498db, #2980b9); -webkit-border-radius: 34; -moz-border-radius: 34; border-radius: 34px; text-shadow: 6px 4px 4px #666666; -webkit-box-shadow: 2px 2px 3px #666666; -moz-box-shadow: 2px 2px 3px #666666; box-shadow: 2px 2px 3px #666666; font-family: Georgia; color: #ffffff; font-size: 20px; padding: 10px 20px 10px 20px; border: solid #216e9e 2px; text-decoration: none; display: table-cell; /* TABLE-CELL */ border: solid transparent 0 10px; margin: 10px; white-space: normal !important; word-wrap: break-word; max-width: 130px !important; text-align: center; vertical-align: middle; height: 65px; /* ADD HEIGHT*/ }
<div class="splash_button_row"> <span> <a href="www.google.com" class="splash_button">label 4 label 4 label 4 </a> <a href="www.google.com" class="splash_button">label 2</a> <a href="www.google.com" class="splash_button">label 5 label 5label 5</a> <a href="www.google.com" class="splash_button">label 5 label 5label 5label 5 label 5label 5</a> </span> </div>
.splash_button {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 34;
-moz-border-radius: 34;
border-radius: 34px;
text-shadow: 6px 4px 4px #666666;
-webkit-box-shadow: 2px 2px 3px #666666;
-moz-box-shadow: 2px 2px 3px #666666;
box-shadow: 2px 2px 3px #666666;
font-family: Georgia;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
border: solid #216e9e 2px;
text-decoration: none;
float: none;
white-space: normal !important;
word-wrap: break-word;
max-width: 130px !important;
text-align: center;
vertical-align: middle;
**margin:10px **auto;****
**display: block;**
**height: 65px;**
**display: flex;
**justify-content: center; /* align horizontal */**
**align-items: center;****
}
為我做了把戲。 看到星星。 我編輯了答案。 我想我現在得到了你想要的。
對齊CSS中幾乎所有內容的最佳方法。 您只需要使用下面的類。
.vertical-center{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.