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

Question

This is what I am trying to achieve:

I am using table, because I have multiple of cells like this. What I need is :

• Paragraph(Procesor) aligned next to icon

• Unordered list aligned under paragraph and next to icon

• Line aligned to bottom of cell

• Same size of cells

So far I have:

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

And CSS is:

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

I know this is probably some noobie mistake, but I am new to this, and I am learning through trial-and-error.

Answer 1

Have updated your code. Try with this. 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

use this css

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