Question

我必须在桌子的左侧放置一个图像。图像必须向左浮动，同时将垂直对齐到中间。似乎margin auto不起作用。有人有任何想法吗？

 <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

你可以用表格来完成这一切。

<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％;它会将图像垂直对齐在中间。

图像浮动左对齐中间

3 个答案: