Question

我写了以下代码centering floated divs

<body>
<div class="educationContainer">
    <div class="employmentOuter">
        <div class="employmentInner">
            <table width="100%">
                <tr>
                    <td align="center">
                        <table border="1">
                            <tr>
                                <td align="center">
                                    test
                                </td>
                            </tr>
                            <tr>
                                <td align="center">
                                    <div class="picture">
                                    </div>
                                    <div class="picture">
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

当你使屏幕足够小以浮动在2个div上以将一个放在另一个上面时，它们都是左对齐的。测试文本仍然居中。

如何让它们相互浮动但仍然居中。

它可能需要在桌子外面完成，但这是我经过几个小时的尝试后结束的地方。

任何帮助都会很棒，更精简的代码可以帮助我学习。

Answer 1

我对此进行了更新，因此您可以通过跨度查看一种方法。

http://jsfiddle.net/95v39/2/

我删除了表格并将图片div更改为带有内联块显示的跨度

<body>
    <div class="educationContainer">
        <div class="employmentOuter">
            <div class="employmentInner">
                <div class="employmentHeader">
                    test
                </div>
                <span class="picture">
                </span>
                <span class="picture blue">
                </span>
            </div>
        </div>
    </div>
</body>

当屏幕尺寸减小时，故障居中2浮动Div

1 个答案: