Question

我试图设置一些我无法控制的HTML。所见即所得。我需要做的是：

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

我试过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;
}

您也可以绝对定位范围并在position:relative上设置h1，但我会尽可能避免绝对定位。

演示：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;
}

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

1 个答案: