1

ページの見出しの横に小さな画像 (ロゴ) を配置しようとしていますが、これら 2 つのアイテムを中央に配置したいと考えています (理想的には、見出しを中央に配置し、画像を見出しの隣に配置します)。とはいえ、どう頑張ってもうまくいかないようです。サンプルは次のとおりです。

<h2>Headline</h2>
<img src="logo.jpg">

ここで、いくつかのことを試しました。h2 に id を持つ div を与え、画像に別の id を持つ div を与えようとしました - 次に、幅を設定してフローティングさせました。これは少なくともそれらを同じ行に配置しますが、私が望む方法ではありません.

また、次のように、これらの div を別の div 内にラップしようとしました。

#container {
width: 800px;
margin: 0 auto;
}

#h2div {
width: 40%;
float: left;
}

#imgdiv {
width: 10%;
float: left;
}

ヘッダーが左から 40% になり、その後に画像が 10% になるようにページを分割しているように見えるだけです。画像で z-index: -1 を試してみました。その後、text-align: center を使用すると、見出しを中央に配置できます。しかし、私は写真に絶対位置または相対位置を与える必要があります。これは、ユーザーがズームインまたはズームアウトするとうまく機能しません..

これを解決するにはどうすればよいですか？見出しを中央に配置し、画像をそのすぐ隣に表示する (見出しの「最後」に固定するようなもの)、または 2 つを中央に共有するにはどうすればよいですか?

4

6 に答える 6

1

このようなものはどうですか:

<div id="container">
    <h2>Headline</h2>
    <img src="logo.jpg">
</div>

#container {
    width: 800px;
    margin: 0 auto;
    text-align: center;
}
#container h2, #container img {
    display: inline;
}

および jsfiddle - http://jsfiddle.net/Ygz4t/

于 2013-10-16T09:31:45.020 に答える
0

imgはインライン要素なのでtext-align:center;、親ブロック要素に割り当てる必要があります。そのようなマークアップがあると仮定します:

<div id="imgdiv">
    <img src="logo.jpg">
</div>

CSS は次のようになります。

#imgdiv {
    text-align: center;
}
于 2013-10-16T09:31:34.283 に答える
0

これを試して

<div id="center">    
<h2>Headline</h2>
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSR613FD45Dsf0nk_cJwlvpAUKsBM6JeOmNjAatjKKBHz_GFXt7rrvslw" alt="not found" />
</div>

デモフィドル

于 2013-10-16T09:39:01.023 に答える
0

HTML:

<div>    
    <h2>Headline</h2>
    <img src="http://farm4.staticflickr.com/3694/10183642403_0c26d59769_s.jpg" />
</div>

CSS:

h2, img {
    display:inline;
}
h2 {
    margin: 0;
    line-height: 100%;
}
img {
    vertical-align: middle;
}

デモ

于 2013-10-16T09:41:15.743 に答える
0

1）h2とimgをdiv内にラップし（コンテナとして呼び出します）、display: inline-blockh2とimgを同じ行に表示します

2）次に使用text-align: center

HTML:

<div id="container">    
<h2 style="display: inline-block">Headline</h2>
<img src="logo.jpg" />
</div>

CSS:

body {
width:1000px;
height: 2000px;
background: #ccc;
}
#container {
    text-align: center;
    width: inherit;
}
h2, img {  
    display: inline-block;
}

JSFiddle

于 2013-10-16T09:34:19.327 に答える
0

私はあなたがこれを試みていると思います、

HTML

<div class="out">
    <div class="inline">
        <h2>TEST</h2>
    </div>
    <div class="inline">
        <img src='http://s15.postimg.org/p4qxel6hz/agent_Photo.jpg' alt="testImage"/>
    </div>
</div>

CSS

.out {
    width: 800px;
    margin: 0 auto;
}
.inline {
    display:inline-block;
}

更新されたJSFIDDLE

于 2013-10-16T09:35:20.313 に答える