需要帮助确定如何使用CSS定位此元素吗

我试图设计一些我无法控制的html样式。所见即所得。我需要做的是：

使文本不在图像下换行。 控制文本的垂直位置。我试图将其大致沿图像的水平中心线放置。 文本不能固定宽度，但图像可以固定宽度。 我尝试过显示：表格、浮动文本元素和绝对定位文本，但它们都有不同的问题。谢谢你的进一步建议

您可能需要收缩帧宽度以查看效果

img { 
   height: 66px; 
   width: 165px; 
   border: 1px solid black; 
}
#title-text { 
   font-size: 32px; 
   line-height: 36px; 
}

---

我在两个元素以及包装器上设置了一个宽度，以确保它们彼此相邻浮动，并且图像下方没有文本

试着这样做：

您也可以绝对定位跨度并在h1上设置position:relative，但我尽量避免绝对定位

演示：

---

谢谢你的主意，韦斯利。不幸的是，我不能依靠一个固定的标题宽度！我将把它添加到我的规范列表中。我添加了另一种方法，它不使用你不想使用的宽度。

<h1 id="title-heading" class="pagetitle">
    <a href=""><img class="logo global custom" src="" alt=""></a>                
    <span id="title-text">
        <a href="">Installing Confluence 3.4 on a Windows 64 bit system</a>
    </span>
</h1>

img {
    height: 66px;
    width: 165px;
    border: 1px solid black;
    background: red;

    /* Float the image */
    float:left;
}
#title-text {
    font-size: 28px;

    /* Since the element comes after in the markup */
    float:right;

    /* (h1 width) - (img width) - (#title-text left padding/margin) */
    width:420px;
}
#title-heading {
    /* set to a width that works for you */
    width:600px;
}

img {
    height: 66px;
    width: 165px;
    border: 1px solid black;
    background: red;
    float:left;
}
#title-text {
    font-size: 28px;
    position:absolute;
    top:0;

    /* (img width) + (span left padding) */
    left:175px;
}

#title-heading {
    /* contain absolute positioned elements */
    position:relative;
}