Question

<html>
    <head>
        <style type="text/css">
            img{
                float: left;
                }
        </style>
    </head>
    <body>
        <img id="img" src="imgsource.jpg">
        <h2> Text that should be next to the image. </h2>
        <p> Text that should be below the image and heading. </p>
    </body>
</html>

我遇到的问题是图像旁边的文字没有居中，当我希望它在图像和标题下方时，下一段也会出现在图像旁边。

Answer 1

http://jsfiddle.net/dxbbog2k/

＆＃13;

img {
    vertical-align: middle;
    width: 300px
}

h2{
    display: inline;
}

p{
    clear:both;
    display: block;
}

＆＃13;

<img id="img" src="http://dreamatico.com/data_images/kitten/kitten-3.jpg">
<h2> Text that should be next to the image. </h2>

<p>Text that should be below the image and heading.</p>

＆＃13;

Answer 2

为此，您应首先更改HTML结构：

<img id="img" src="https://placekitten.com/g/200/300">
<div id="text">
    <h2> Text that should be next to the image. </h2>
</div>

<div class="clear"></div>
<p> Text that should be below the image and heading. </p>

然后在正确的元素上使用浮点数将它们放在彼此旁边：

img, #text{
    float: left;
}

使用display: table-cell和vertical align，您可以将文字垂直居中放在图片旁边。 注意：您必须知道此图像的高度。

#text h2{
    vertical-align: middle;
    height: 300px;
    display: table-cell;
    padding-left: 10px;
}

最后，请不要忘记clear your floats，以便文字的其余部分在图片下方。

.clear{
    clear: both;
}

JSFiddle demo

如何使用css将文本置于浮动图像旁边？

2 个答案: