0

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

我尝试将文本放在文本中，但每当我这样做时，文本都无法正确居中。我还必须在图像下方添加一个链接，所以我认为这不是最好的方法。

这是我的代码问题的 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;
}
4

2 回答 2

0

尝试这些方面的东西

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;
}
于 2013-07-21T22:25:20.937 回答
0

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

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

于 2013-07-21T22:23:52.843 回答