【发布时间】：2018-03-11 01:27:35
【问题描述】：
在我的 html 应用程序中，我只想在 span 元素上方添加一些居中的文本，这是我的 jsfiddle：https://jsfiddle.net/19qwxkhf/9/
这里是html和css：
<article class="tab-pane" id="tab-reporting">
<section>
<ul class="active">
<li>
<label>Test 1</label>
<span class="badge badge-success">Test1</span>
This text should be above Hello badge and centered
<span class="badge badge-important">Hello</span>
</li>
<li>
<label>Test 2</label>
<span class="badge badge-success">Test1</span>
This text should be above Hello 2 badge and centered
<span class="badge badge-important">Hello 2</span>
</li>
</ul>
</section>
</article>
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.badge-success {
background: green !important;
color: #fff !important;
min-width: 0px !important;
/* If you need */
padding: 0px !important;
}
.badge-important {
background: red !important;
color: #fff !important;
}
#tab-reporting {
padding-bottom: 100px;
ul {
list-style-type: none;
&.inactive {
margin-top: 25px;
opacity: 0.3;
}
}
label {
width: 245px;
margin-right: 15px;
}
li {
margin-bottom: 5px;
display: table;
&.survey-start {
margin-top: 15px;
}
> label {
font-weight: normal;
margin-left: 30px;
padding-top: 7px;
&.colspan {
width: 100%;
}
}
.colspan-nest {
text-indent: 25px;
}
> span {
display: table-cell;
min-width: 175px;
vertical-align: middle;
text-align: center;
border-radius: 0;
background: #ddd;
padding: 7px;
&.no-background {
background: none;
}
}
}
.txt {
padding-left: 5px;
}
.lh {
font-size: 1.8em;
padding: 12px 0 5px;
}
}
ul {
list-style-type: none;
padding: 0;
}
span {
width: 100px;
}
应该是这样的：
【问题讨论】：
-
label {text-align:center;display:block} -
标签不应居中。
This text should be above Hello badge and centered应该居中。 -
将该文本包装在 div 中，然后
text-align:center -
编译你的预处理CSS，我会给你一个认真的答案。
-
你知道 CSS 和 LESS、SCSS、SASS 等预处理 CSS 之间的区别吗？