html - H1タグをその左右の画像と中央揃えにします

Question

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>

Answer 1

これがUIの一部である場合（コンテンツではない）-H1の左側をパディングし、CSS背景画像を使用してから、ラッパーで同じことを行います（ただし、右端をパディングします）。background-position画像を左または右に揃えるために使用します。

Answer 2

試す：

<style>
.titlewrap .dl, .titlewrap .dr{
    vertical-align:middle;
}
.titlewrap .title{
    display:inline-block;
    *display:inline;
}
</style>

Answer 3

私のために働いたのは：

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*/
}

Answer 4

試す：

.titlewrap { float: left; left: 50%; position: relative}
.titlewrap > * {float:left; left: -50%}​