Question

我想在某些文字旁边放一张图片。我希望它与文本垂直居中但向左偏移，因此它不会与文本重叠。我可以实现这一点，但每当我调整浏览器大小并使其缩小时，图像就不会移动。

我已经尝试将文字放在文本中但是每当我这样做时，文本都没有正确居中。我还必须在图片下方添加一个链接，这样我就不会认为这是最好的方式。

这是我的代码问题的JSBin：http://jsbin.com/evasix/2/ **我在jsbing中包含了我的完整代码，因为我认为某些东西可能被另一个div类继承。

HTML：

<div class="middle">
    <div class="side-img">
        <h2>Millions of entrepreneurs, freelancers, small<br>businesses, and departments inside big<br> organizations rely on our web apps.</h2>
        <img src="images/img-customerss.png" class="customers">
    </div>
</div>

CSS：

h2 {
    position: relative;
    top: -30px;
    text-align: center;
    font-size: 45px;
    color: #232323;
    font-family: 'Crimson Text', serif;
    line-height: 50px;
}


.customers {
    position: relative;
    bottom: 150px;
    left: 425px;
}

Answer 1

这是因为您使用了边缘的像素距离。像素是固定大小，调整窗口大小不会使其适应。尝试使用其他计量单位，例如%。

希望它有所帮助。祝你好运。

Answer 2

沿着这些方向尝试一些事情

http://jsfiddle.net/TCdsK/3/

HTML：

    <div id="content1">
        <ul class="tmo_list">
                <strong>
          Commercial Buildings<br><br>
          Shopping Centers<br><br>
          Dumpster Pads<br><br>
          Decks & Patio<br><br>
          Store Fronts<br><br>
          Restaurants<br><br>
          Drive Ways<br><br>
          Awnings<br><br>
                </strong>
            </ul>

    </div>

    <div id="imageCol">
        <div class="wrapper">
        <img src="http://theclassroomkit.com/images/link_icons/literacylinks/starfall-abc.gif"/>
    </div>

    </div>

    <div id="content2">
            <strong>
          Office Buildings<br><br>
          Business Signs<br><br>
          Loading Docks<br><br>
          Rust Removal<br><br>
          Wood Fences<br><br>
          Gas Stations<br><br>
          Bus Stops<br><br>
          Homes<br><br>
                </strong>
            </ul>

    </div>

</div>

CSS：

#container {
    width: 100%;
    margin: 0 auto;
}

#content1 {
    float: left;
    width: 30%;
}

#imageCol {
    float: left;
    width: 40%;
}

#content2 {
    float: left;
    width: 30%;
}


.wrapper img {
display: inline-block;
max-width: 100%;
height: auto;
width: auto;
}

图像不会随浏览器大小调整大小

2 个答案: