2

我正在尝试找到一种方法将包含图像的块居中对齐到H1标签的左侧和右侧。图像需要包装h1标签。H1标签需要能够随着标题的大小而增长：

<div class=titlewrap">
    <img src="/images/hl.png" class="dl">
        <h1 class="title">Gallery</h1>
    <img src="/images/hr.png" class="dr">    
</div>
4

4 回答 4

2

如果这是 UI 的一部分（不是内容） - 填充 H1 的左侧并使用 CSS 背景图像，然后对包装器执行相同操作（但填充右端）。用于background-position将图像左对齐或右对齐。

于 2012-05-10T14:40:37.700 回答
1

尝试：

<style>
.titlewrap .dl, .titlewrap .dr{
    vertical-align:middle;
}
.titlewrap .title{
    display:inline-block;
    *display:inline;
}
</style>
于 2012-05-10T14:48:33.487 回答
1

对我有用的是：

HTML 标记：

<h1>
    <img src="img1.png" alt="back">
    This is the H1 text
    <img src="img2.png alt="logo">
</h1>

CSS 标记：

h1 {
    position: relative;
}

img[alt="back"] {
    position: absolute;
    left: 20px /* Distance from the left side of the 
                  page where you want the image*/
}

img[alt="logo"] {
    position: absolute;
    right: 20px /* Distance from the right side of the
                   page where you want the image*/
}
于 2014-01-25T02:37:16.573 回答
0

尝试：

.titlewrap { float: left; left: 50%; position: relative}
.titlewrap > * {float:left; left: -50%}​
于 2012-05-10T14:42:24.420 回答