html – Bootstrap btn组垂直文本对齐

概述我正在使用btn组来完成配置过程的10个步骤. 这是我目前的样本. http://pixelneering.com/progress-steps.html 选项4,5和9只有1行,因此在中间对齐.我试图使所有选项vertical-align：top;但没有一个元素对此作出反应. 所以我有HTML,标准的btn组 <div class="btn-group hidden-xs" style="mar 我正在使用btn组来完成配置过程的10个步骤.

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

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

所以我有HTML,标准的btn组

<div  >  <button ><span >1</span><span >Contact<br>information</span></button>  <button ><span >2</span><span >Standard<br>Specifications</span></button>  <button ><span >3</span><span >Compressor Frame<br>& Cylinders</span></button>  <button ><span >4</span><span >Driver<br></span></button>  <button ><span >5</span><span >Air Cooler<br></span></button>  <button ><span >6</span><span >Controls,Instrumentation<br>& Wiring</span></button>  <button ><span >7</span><span >Vessels <br>& PiPing</span></button>  <button ><span >8</span><span >Process Gas Valves<br>& AccessorIEs</span></button>  <button ><span >9</span><span >Miscellaneous<br></span></button>  <button ><span >10</span><span >Configuration<br> Summary</span></button></div>

和btn步骤的CSS

.btn-steps {  text-align: left;  @R_404_6837@-size: 11px;  min-height: 50px;  background-color: #eeeeee;  border-color: #eeeeee;  color: #333;  vertical-align: top;  text-shadow: 0 -1px 0 rgba(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,#d5d5d5);  background-image: -o-linear-gradIEnt(top,#d5d5d5);  background-image: linear-gradIEnt(to bottom,#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.1) rgba(0,0.25);}

这应该是一个简单的CSS修复,但我显然遗漏了一些东西.

解决方法 一个按钮是 Replaced Element,它超出了CSS的范围.按钮的内容始终居中.你可能能够以一种黑客的方式改变它.但是根据您的需要,最好将< a>标签出你的按钮.见这小提琴： https://jsfiddle.net/v9oLtq4e/ 总结

以上是内存溢出为你收集整理的html – Bootstrap btn组垂直文本对齐全部内容，希望文章能够帮你解决html – Bootstrap btn组垂直文本对齐所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。