Question

对这个有一些困难。我还没有学习HTML，但我已经掌握了它。

在我的网站上，我在网站顶部有一个徽标。我想在不移动图像位置的情况下使用图像在网站左侧添加一些文本。

             LOGO
             LOGO
             LOGO
Text here    LOGO
|------------------------------|  (Page width)

文字不能高于或低于徽标线，因为它会弄乱页面的其余部分。

编辑：我决定删除“我现在拥有的东西”，因为它在上下文中令人困惑。

那你怎么解决这个场景？

Answer 1

抱歉，这是你想要的吗？ :) http://jsfiddle.net/ex65xetj/

<div class="wide">
    <img src="path/to/image"></img>
    <span>Text here</span>
</div>

只需将徽标部分包装在包装中即可。

使其相对位置（因此儿童绝对定位是相对于此元素而不是页面）。

然后将文本置于绝对位置。

使文本的左侧和底部位置值为0，因此它会粘在左下角。

Answer 2

<div class="logo-div">
    <img src="" alt="logo"/>
    <div class="text-block">Your text goes here</div>
</div>

CSS

.logo-div{
    border:1px solid #ccc;
    padding:40px;
    text-align:center;
    background-color:#f6f6f6;
}
.text-block{
    top:70px;
    left:190px;
    position:absolute;
}

工作小提琴：http://jsfiddle.net/raghuchandrasorab/jy9n4hp2/

文本内嵌中心图像

2 个答案: