我是新的应有的css& Html设计。我正面临着将文本与最后一个div的中心对齐的问题。
我创建了js小提琴:http://jsfiddle.net/80sems56/
请帮助将最后一个div文本“压力”对齐到最后一张图像的中心。
代码就像:
<div>
<div id="imgWeight" class="floatLeft">
<img alt="Body Weight" class="icon110" src="../../images/OnTrack/bmi_icon_100.png"/>
<div class="textaligncenter">Body Weight</div>
</div>
<div id="imgBloodPressure" class="margin5 floatLeft">
<img alt="Blood Pressure" class="icon110" src="../../images/OnTrack/health_manager_icon_100.png"/>
<div class="textaligncenter">Blood Pressure</div>
</div>
<div id="imgStress" class="floatleft">
<img alt="Stress" class="icon110" src="../../images/OnTrack/stress_icon_100.png"/>
<div class="textaligncenter">Stress</div>
</div>
</div>
CSS
padding20px{
padding:20px;
}
.margin20px{
margin:20px;
}
.imgSteps{
padding:20px;
position:absolute;
}
.bckColor{
background-color: @secondary;
color:@white;
}
.fontfamily {
font-family: "Avenir Next Light";
}
h3{
color:grey;
}
.margin5 {
margin-left: 5%;
margin-right: 5%;
}
.margin15 {
margin-left: 15%;
}
.margin6{
margin-left: 6%;
}
.margin10 {
margin-left: 10%;
}
.margin50{
margin-left:50%;
}
.absPosition{
position: absolute;
}
.floatLeft{
float:left;
}
.shadow {
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.4);
}
.opacity{
opacity: 0.3;
filter: alpha(opacity=30);
}
#dvNavigationArea ul li {
display: inline;
padding-right:20px;
width:100px;
position:relative;
}
.underline{
content:'';
height: 0;
left:0;
bottom:0px;
border-bottom: 4px solid #53ADB3;
}
/*for css chart control*/
.container {
width: 100px;
margin: 20px;
background: #fff;
padding: 20px;
float: left;
}
.horizontal .progress-bar {
height: 45px;
width: 100%;
padding: 12px 0;
}
.horizontal .progress-track {
width: 100%;
height: 20px;
background: #ebebeb;
}
.horizontal .progress-fill {
background: #666;
height: 20px;
width: 50%;
color: #fff;
text-align: center;
font-size: 12px;
line-height: 20px;
}
.fontColor{
color:#53ADB3;
}
.fontsizexlarge{
font-size: x-large;
}
.fontsizexxlarge{
font-size: xx-large;
}
.fontsize22{
font-size: larger;
}
.fontsize10{
font-size: large;
}
.icon110
{
background-color:@secondary;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius: 50%;
width:@col-size;height:@col-size;
}
.textaligncenter{
text-align:center;
}
.minwidth
{
}
答案 0 :(得分:3)
在为最后一个div分配类时,你做了错字。使用floatLeft
代替floatleft
(字母 l 是罪魁祸首)
答案 1 :(得分:2)
答案 2 :(得分:1)
*添加此代码* floatLeft
http://jsfiddle.net/80sems56/3/
答案 3 :(得分:1)
你的HTML有错误。你错过了<div>
<div id="imgWeight" class="floatLeft">
<img alt="Body Weight" class="icon110" src="../../images/OnTrack/bmi_icon_100.png"/>
<div class="textaligncenter">Body Weight</div>
</div>
<div id="imgBloodPressure" class="margin5 floatLeft">
<img alt="Blood Pressure" class="icon110" src="../../images/OnTrack/health_manager_icon_100.png"/>
<div class="textaligncenter">Blood Pressure</div>
</div>
<div id="imgStress" class="floatLeft">
<img alt="Stress" class="icon110" src="../../images/OnTrack/stress_icon_100.png"/>
<div class="textaligncenter">Stress</div>
</div>
</div>
班级的大写字母'L'。
Row no: Col 1 | Col 2 | Col 3 | Col 4 | Col 5
1:Date | Name | Phone | Status | Remarks
2:01/06/15 | Client1 | 1001 | FU | will come again
3:01/06/15 | Client2 | 2002 | DFU | Not joining
4:02/06/15 | Client3 | 3003 | Sales | Enrolled
5:03/06/15 | Client1 | 1001 | Sales | repeat walkin, enrolled today