Bootstrap btn组垂直文本对齐

我对配置过程的10个步骤使用了一个btn组。Bootstrap btn组垂直文本对齐

这是我目前的样本。 http://pixelneering.com/progress-steps.html

选项4,5和9只有1行，因此在中间对齐。我正在尝试使所有选项vertical-align：top;但没有一个元素对此作出回应。

所以HTML我有，标准BTN组

<div class="btn-group hidden-xs" style="margin: 9px 0;"> 
    <button class="btn btn-steps"><span class="step-number">1</span><span class="step-description">Contact<br>Information</span></button> 
    <button class="btn btn-steps"><span class="step-number">2</span><span class="step-description">Standard<br>Specifications</span></button> 
    <button class="btn btn-steps"><span class="step-number">3</span><span class="step-description">Compressor Frame<br>& Cylinders</span></button> 
    <button class="btn btn-steps"><span class="step-number">4</span><span class="step-description">Driver<br></span></button> 
    <button class="btn btn-steps"><span class="step-number">5</span><span class="step-description">Air Cooler<br></span></button> 
    <button class="btn btn-steps"><span class="step-number">6</span><span class="step-description">Controls, Instrumentation<br>& Wiring</span></button> 
    <button class="btn btn-steps"><span class="step-number">7</span><span class="step-description">Vessels <br>& Piping</span></button> 
    <button class="btn btn-steps"><span class="step-number">8</span><span class="step-description">Process Gas Valves<br>& Accessories</span></button> 
    <button class="btn btn-steps"><span class="step-number">9</span><span class="step-description">Miscellaneous<br></span></button> 
    <button class="btn btn-steps"><span class="step-number">10</span><span class="step-description">Configuration<br> Summary</span></button> 
</div>

而对于BTN-步骤

.btn-steps { 
    text-align: left; 
    font-size: 11px; 
    min-height: 50px; 
    background-color: #eeeeee; 
    border-color: #eeeeee; 
    color: #333; 
    vertical-align: top; 
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25); 
    background-color: #e4e4e4; 
    background-image: -moz-linear-gradient(top,#eeeeee,#d5d5d5); 
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#eeeeee),to(#d5d5d5)); 
    background-image: -webkit-linear-gradient(top,#eeeeee,#d5d5d5); 
    background-image: -o-linear-gradient(top,#eeeeee,#d5d5d5); 
    background-image: linear-gradient(to bottom,#eeeeee,#d5d5d5); 
    background-repeat: repeat-x; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffd4d4d4', GradientType=0); 
    border-color: #d5d5d5 #d5d5d5 #aeaeae; 
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25); 
}

这个CSS应该是一个简单的CSS的修复，但我清楚地失去了一些东西。

来源

2015-04-15 pixelneer

A button是Replaced Element它超出了CSS的范围。并且按钮的内容始终居中。你可能能够以一种骇人的方式改变它。但是，为了您的需要，最好是将<a>标签放在按钮之外。看到这个小提琴：https://jsfiddle.net/v9oLtq4e/

来源

2015-04-15 18:01:25

你可以（在许多情况下应该）风格'

您可以设计一个“按钮”，但不能像“a”标签一样。希望这个链接使它更加清晰http://reference.sitepoint.com/css/replacedelements –

正确答案。谢谢 –

如果你希望他们垂直对齐到中间，只需从每个按钮中的span元素中删除高度。当元素被设置为其容器的大小时，（必要时）已经垂直对齐。

请记住，vertical-align引用了元素对齐方式，而不是元素内的文本对齐方式。如果你正在寻找这种风格的行为，你可能想看看display: table-cell，但我不认为这是一段时间的工作来实现文本的垂直对齐。

如果您想要相反，只需给span元素在button内的高度等于容器。文本流将强制元素从顶部开始，因此您已经实现了垂直对齐。

在约束元素（例如你的）的情况下，这是一个容易解决的问题。内容是动态的时候变得更加困难，虽然不是非常困难。

来源

2015-04-15 18:03:53

Bootstrap btn组垂直文本对齐

回答

相关问题