如何设置图标旁边的列表和段落？

Question

这就是我想要实现的目标：

我正在使用表格，因为我有多个像这样的单元格。我需要的是：

• 段落（处理器）在图标

旁边对齐

• 在段落下方和图标

旁边对齐的无序列表

• 线条与细胞底部对齐

• 相同尺寸的细胞

到目前为止，我有：

<td width="275" height="140" class="bottom">
    <img src="http://imagehost.cz/images/1h636n4fs7e57jqrwk9.png" />
    <p>Procesor</p>
    <ul>
        <li>Description</li>
    </ul>
    <img src="http://imagehost.cz/images/kuovfjbxatq5vovthqje.png" id="line"/>
</td>

CSS就是：

.bottom {vertical-align: bottom;}
#line {display: block;margin: auto;}

我知道这可能是一些noobie错误，但我是新手，我正在学习 试验和错误。

Answer 1

已更新您的代码。试试这个。 Working Fiddle

.bottom {
background:#f9f9f9;
padding:10px;
width:275px;
display:block;
min-height:140px;
border-bottom:2px solid #000;
}
#line{
display:block;
margin:auto;
}
img{
display:inline-block;
vertical-align:middle;
}
p{
display:inline-block;
margin:0;
}
ul{
display:block;
margin: 5px 0 10px 10px;
font-size:12px;
color:#333;
font-family:Arial;
}

Answer 2

使用此css

.bottom,img {
    vertical-align: middle;
}
p{
    display:inline-block;
}
#line {
    display: block;
    margin: auto;
}