需要帮助确定如何定位这个元素与CSS

Question

我试图样式一些HTML，我没有控制。所见即所得。我需要做的是：

1. 让文字不包裹在图像下。
2. 控制文字的垂直位置。我试图将其大致沿图像的水平中心线放置。
3. 文字不能固定宽度（图像，但可以和是固定的宽度）。

我试过display: table，浮动文本元素和绝对定位文本，但他们都有不同的问题。感谢您的任何进一步的想法。

http://jsfiddle.net/6fjCX/3/（您可能需要收缩帧的宽度，看看效果）

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

<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> 

Answer 1

我设置这两个元素的宽度以及包装<h1>，以确保他们会漂浮在彼此旁边，图像下面不会有文字。

尝试这样：http://jsfiddle.net/6fjCX/5/

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; 
} 

你也可以完全定位跨度上h1设置position:relative，但我会尽量避免绝对定位可能时。

演示：http://jsfiddle.net/6fjCX/7/

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; 
}