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 をいくつか削除し、と の両方でとvertical-align: middle;一緒に使用するだけです。display: 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

margin-top: 50% を使用します。画像を中央に垂直に揃えます。