css - 图像浮动左对齐中间

Question

我必须将图像放在桌子的左侧。图像必须向左浮动，同时垂直居中对齐。这似乎margin auto不起作用。有人知道吗？

http://jsfiddle.net/XDT9j/

 <div style="width:70%;margin:0 auto;">
        <div style="float:left;">


         <img width="128" height="128" src="http://www.gravatar.com/avatar/image" 
style="margin-top:auto;margin-bottom:auto;"/>
            </div>
            <div>
            <table>
                <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
                <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
                <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
                <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
                <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
                <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
                <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
                <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
                <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
                <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
                <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
                <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
                <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
                <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
                <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
                <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
            </table>
        </div>
    </div>

Answer 1

去掉一些无用的 HTML，简单地在 the和 the上使用vertical-align: middle;withdisplay: inline-block;<img><table>

演示：http: //jsfiddle.net/7SRgh/

HTML

<div id="myDiv" >   
        <img id="myImg"  src="http://www.gravatar.com/avatar/image" />


        <table>
            <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
            <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
            <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
            <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
            <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
            <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
            <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
            <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
            <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
            <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
            <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
            <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
            <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
            <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
            <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
            <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
        </table>
</div>

CSS

#myDiv table, #myImg {
    vertical-align: middle;
    display: inline-block;
}

#myDiv {
    width:70%;
    margin:0 auto;
    border: 1px dashed silver;
}

#myImg {
    width: 128px;
    height: 128px;
}

Answer 2

你可以用桌子来做这一切。

<div style="width:70%;">
<table>
<tr>
<td>
   <img width="128" height="128" src="http://www.gravatar.com/avatar/image" />
</td>
<td>
    <table>
        <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
        <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
        <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
        <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
        <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
        <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
        <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
        <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
        <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
        <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
        <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
        <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
        <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
        <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
        <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
        <tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
    </table>
    </td></tr></table>
 </div>

Answer 3

使用margin-top：50%；它会将您的图像垂直对齐在中间。