css垂直对齐,奇怪的结果
我已经创建了一个JSFIDLE,显示了正在运行的代码。现在的情况是图像和文本对齐是逐步堆叠,而不是垂直对齐。有人能解释为什么会这样吗 CSS标记:css垂直对齐,奇怪的结果,css,Css,我已经创建了一个JSFIDLE,显示了正在运行的代码。现在的情况是图像和文本对齐是逐步堆叠,而不是垂直对齐。有人能解释为什么会这样吗 CSS标记: .outList { display:table; } .outList span { display:table-cell; vertical-align:middle; width:10%; } .outList h4 { display:table-cell; vertical-align:mid
.outList {
display:table;
}
.outList span {
display:table-cell;
vertical-align:middle;
width:10%;
}
.outList h4 {
display:table-cell;
vertical-align:middle;
width:50%;
padding-left: 10px;
}
.outList p {
float:right;
display:table-cell;
vertical-align:middle;
/*width:30%;*/
text-align:right;
}
.outList img {
width:100%;
}
<ul>
<li data-theme="c">
<a href="detail.html">
<div class="outList">
<span><img src="simgs/listview_chk.png" /></span>
<h4>Warmup</h4>
<p>5 Minutes</p>
</div>
</a>
</li>
<li data-theme="c">
<a href="detail.html">
<div class="outList">
<span><img src="simgs/listview_chk.png" /></span>
<h4>Machine Press</h4>
<p>3 sets of</p>
</div>
</a>
</li>
<li data-theme="c">
<a href="detail.html">
<div class="outList">
<span><img src="simgs/listview_chk.png" /></span>
<h4>Lateral Pulldowns</h4>
<p>3 sets of</p>
</div>
</a>
</li>
</ul>
HTML标记:
.outList {
display:table;
}
.outList span {
display:table-cell;
vertical-align:middle;
width:10%;
}
.outList h4 {
display:table-cell;
vertical-align:middle;
width:50%;
padding-left: 10px;
}
.outList p {
float:right;
display:table-cell;
vertical-align:middle;
/*width:30%;*/
text-align:right;
}
.outList img {
width:100%;
}
<ul>
<li data-theme="c">
<a href="detail.html">
<div class="outList">
<span><img src="simgs/listview_chk.png" /></span>
<h4>Warmup</h4>
<p>5 Minutes</p>
</div>
</a>
</li>
<li data-theme="c">
<a href="detail.html">
<div class="outList">
<span><img src="simgs/listview_chk.png" /></span>
<h4>Machine Press</h4>
<p>3 sets of</p>
</div>
</a>
</li>
<li data-theme="c">
<a href="detail.html">
<div class="outList">
<span><img src="simgs/listview_chk.png" /></span>
<h4>Lateral Pulldowns</h4>
<p>3 sets of</p>
</div>
</a>
</li>
</ul>
-
-
-
问题的正确形象:
扔掉div,你不需要它们,因为你有li的 还有,为什么要跨越img?把它也扔掉
当你这样做的时候,把ul作为表格,把li作为行,然后把a中的东西作为列。好的,看一看 只需在下一个.css类中删除宽度:
.outList img {
width: 100%;
}
更新
要使右侧的文本完全对齐,请删除float:right代码>来自p
类:
.outList p {
float:right;
display:table-cell;
vertical-align:middle;
/*width:30%;*/
text-align:right;
}
您的JSFIDLE需要一些工作。谢谢,末尾的文字没有垂直对齐。您也可以在jsfiddle中看到它。你知道我该怎么解决这个问题吗?