Question

我是新的应有的css＆amp; Html设计。我正面临着将文本与最后一个div的中心对齐的问题。

enter image description here

我创建了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
{

}

Answer 1

在为最后一个div分配类时，你做了错字。使用floatLeft代替floatleft（字母 l 是罪魁祸首）

Js Fiddle

Answer 2

您的上一个floatLeft班级名称应为flaotleft而不是<div id="imgStress" class="floatLeft">。

{{1}}

Fiddle

Answer 3

*添加此代码* floatLeft http://jsfiddle.net/80sems56/3/

Answer 4

你的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'。

Updated Fiddle

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

将文本对齐到最后一个div的中心

4 个答案: