0

私が持っているコードの下を見てください。名前が画像の右側の中央に配置されるように、名前を画像に合わせようとしています。私はそれを正しく行うことができませんでした。position: absolute; を追加してみました。しかし、それでもうまくいきません。

    <div id="contain">
    <div id="baseline">

    <div id="title2">

    <img src="http://www.marketingjava.com/wp-content/uploads/2012/01/
    new-default-twitter-avatar.jpg" id="prof_image">Ariel Smith</div>
    </div>

    CSS:

    #contain {
    width: 770px;
    min-height: 170px;    
    margin: 20px auto 60px auto;
    color: #222222;
    font-size: 15px;    
    position: relative;
    }
    #baseline {
    color: #999;
    }

    #title2 {
    color: #000;
    font-size: 30px;
    margin-left: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    width: 750px;
    }
4

3 に答える 3

4

両方を左にフロートさせ、タイトルを余白で調整して中央に配置します。

http://jsfiddle.net/FBj3f/

于 2012-05-01T01:43:43.670 に答える
1

画像の高さがわかっている場合は、タイトルの行の高さを設定して、タイトルを垂直方向に中央揃えにすることができますhttp://jsfiddle.net/BtPwh/1/

テーブルの使用に反対していない場合は、自動的に (画像の高さは必要ありません)、次のようにできます: http://jsfiddle.net/tLggp/1/

于 2012-05-01T01:35:28.933 に答える
0

最も簡単な方法は、イメージ要素の代わりに background-image を使用するように設定することです。次に、そのブロック内のテキストを右揃えにすると、右上に配置されます。

于 2012-05-01T01:32:57.853 に答える