Question

如果可能的话，我希望将一组文本（<p>TextHere</p>）与图像的位置对齐。我的页面上有一个水平居中的图像：

.headerlogo {
    height: 60px;
    width: 70px;
    position: fixed;
    z-index: 99;
    margin-top: 5px;
    left: 50%;
    margin-left: -35px;
}

现在，我想要一些文本在其右侧/左侧50px ...我认为可能有某种方法可以使用类似于margin-left的方法来做到这一点但到目前为止还没有到来任何事情。
我知道我可以使用margin-left: 600px;将文本从左侧放出一定距离，以便它看起来很好并且在图像旁边，但是众所周知，这将在窗口调整大小时移动。
/>任何帮助都会非常感激，因为我仍然很擅长定位...

Answer 1

因为您没有发布问题的相关代码，但我仍尝试使用margin-left:50px显示图像旁边的文字。并且它不会移动窗口调整大小。这是jsFiddle链接http://jsfiddle.net/datechogeek/qU6Cb/

Answer 2

保持文字的位置：绝对，并根据需要添加左，右位置。如果您可以发布完整的HTML代码，那就太好了。

Answer 3

你在尝试这样的事吗？

HTML

<div class='wrapper'>
    <p class='leftText'>Left text</p>
    <img class='headerlogo' src='http://m.c.lnkd.licdn.com/media/p/2/000/19b/1b2/065601a.png' alt='your_image'/>    
    <p class='rightText'>Right text </p>
</div>

CSS

.wrapper{
    position:relative;    
    height:60px;
    width:280px;
    margin:auto;

}

.headerlogo {
    position:relative;
    float:left;
    height: 60px;
    width: 70px;
    margin-left:50px;
    margin-right:50px;
}

.leftText, .rightText {
    position:relative;
    float:left
}

Fiddle Link

相对于图像定位文本

3 个答案: