將文本對齊到最後一個div的中心

Question

我是新的到期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 
{ 

} 

Answer 1

您在爲最後一個div分配類時犯了打字錯誤。使用floatLeft代替floatleft（信升是罪魁禍首）

Js Fiddle

Answer 2

你最後div類名稱應該是floatLeft，而不是flaotleft。

<div id="imgStress" class="floatLeft"> 

Fiddle

Answer 3

*添加以下代碼* .floatleft{ float: left; text-align: center;} http://jsfiddle.net/80sems56/3/

Answer 4

你的HTML有一個錯誤。你缺少資本 'L' 上floatLeft類。

Updated Fiddle

<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>