我可以在图像和表格之间对齐文本吗？

Question

我是初学者，我无法让某个页面看起来像我想要的项目。我左边有一张图片，右边有一张桌子，但是一旦我添加了文字（我希望在两者之间），它就会把桌子推到页面上。

表和图像的CSS：

.charactertable
{
    padding: 0px;
    float: right;
}

.characters.img
{
    width: 150px;
    height: 220px;
    float: left;
    margin-left: 30px;
}

Answer 1

由于图像是左浮动的并且表格具有浮动：右边，如果您打算在其间添加文本，则需要在HTML中按正确顺序放置它们。

订单应为：

.charactertable {
    padding: 0px;
    float: right;
    border: 2px #DDD solid;
}
.characters.img {
    width: 150px;
    height: 220px;
    float: left;
    margin-left: 30px;
}

<img src="http://lorempixel.com/100/100" alt="" class="characters img">

<table class="charactertable">
    <tr>
        <td>Data</td>
        <td>Data</td>
    </tr>
</table>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas cumque voluptatum est esse ea. Quis nulla cumque nihil vitae ipsa excepturi veniam ut perspiciatis quibusdam minima ipsam reprehenderit. Deserunt reiciendis.

Answer 2

你能提供一些代码吗？ 无论如何 尝试在div中添加文本并将div居中。 例如：

<div id="center">This will be centered between something</div>

CSS
#center{
margin:0 auto;
text-align:center;
}