- ベストアンサー
[CSS]文字の位置を指定する。
ブログのデザインを修正中です。 左メニューが、バックに画像上に文字と言う形でレイアウトされています。 その部分のCSSは以下のようになっています。 h3.sidebar-cap{ height: 25px; font: 800 120% Georgia,arial, sans-serif; background: url("Images/tabu.001.gif") no-repeat; border: 0px solid #b3b3b3; margin : 0; letter-spacing: 2px; color: #4040a9; } さて、この状態だと、イメージの上にある文字列が上寄せ状態になってしまっています。 これを中央寄せ(または数値で下に移動)させるにはどうしたらいいですか? 素人考えで position: relative; top: 20px; を追加してみましたが、バック画像ごと下方向に移動してしまいました。 文字列だけ移動させる方法を教えてください。
- master-3rd
- お礼率39% (524/1325)
- CSS
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (3)
- tany180sx
- ベストアンサー率63% (239/379)
回答No.4
- grizzlycat
- ベストアンサー率47% (21/44)
回答No.2
noname#20941
回答No.1
height: 25px; ↑これがおそらくメニューの文字の行高さを指定しているのではないかと思うので、ここの数値を変更してみてはいかがでしょう。
質問者
補足
返答ありがとうございます。 残念ですが、変更すると画像下のリストが下がってしまいました。
お礼
あ、すみません。 下にずらしたいのは<h3>に囲まれた「最近の書き込み」の文字列です。
補足
返答ありがとうございます。 しかし、変化無しです。 とりあえず、すべて貼り付けます。 /* -----------------------[ サイドバー関連 ]--------------------- */ #recently, #menu, #categories, #comments, #trackbacks, #archives, #tags, #others { font-size: 90%; color: #000084; } h3.sidebar-cap{ font-size: 100%; height: 25px; font: 800 120% ; background: url("Images/tabu.001.gif") no-repeat; border: 0px solid #b3b3b3; margin : 0; letter-spacing: 2px; color: #444445; } .sidebar-body{ border: 1px dotted #b3b3b3; border-top-width: 0; background-color: #ffffe5; padding: 5px; margin-bottom: 15px; } .sidebar-body a{ font-weight: normal; } .sidebar-foot { /*margin-top: 0; padding-top: 0;*/ } span.expand-icon { /* サイドボックス展開用ボタン */ display: block; width: 13px; height: 13px; font-size: 1px; margin: 1px 2px 2px 0; background: url(Images/toggle.png) 0px 0px no-repeat; float: right; cursor: pointer; z-index: 1000; } /* UL指定 デフォルトではマークなし */ ul, ol { list-style: none; } ul.sidebar-menu { /* # メニュー用 */ text-align: center; list-style: none; } /* # 最近のエントリー・コメント・トラックバック用スタイル */ ul.sidebar-recently, ul.sidebar-comments, ul.sidebar-trackbacks, ul.sidebar-archives, ul.sidebar-others { width: auto; padding-left: 7px; } ul.sidebar-recently li, ul.sidebar-comments li, ul.sidebar-trackbacks li { padding: 3px 0 2px 15px; background: url(Images/listmark4.gif) 2px 8px no-repeat; } ul.sidebar-comments ul li.nest1 { margin-top: 1px; margin-left: 9px; padding : 0px 0px 2px 20px; background: url(Images/nest1.png) 0 1px no-repeat; } ul.sidebar-trackbacks ul li.nest1 { background: url(Images/nest1.png) 0 1px no-repeat; padding : 0px 0px 2px 20px; } ul.sidebar-trackbacks li.no-ping { /* tBがまだないとき */ color: #bbb; background: none; padding-left: 2em; font: small-caps 13px Century Gothic,Arial,sans-serif; } ul.sidebar-comments ul li.nest2 { margin-left: 27px; padding-left: 20px; background: url(Images/nest2.png) 0 3px no-repeat; } ul.sidebar-comments ul li.show-all-comments a { color: navy; padding-bottom:5px; font-size: x-small; } ul.sidebar-comments ul li.show-all-comments a:before { content: " ↓ "; } ul.sidebar-categories { /* サイドバーカテゴリー表示 */ text-align: left; } ul.sidebar-categories * a { font-size: 90%; } ul.sidebar-categories li.main-category { background: url(Images/listmark4.gif) 15px 4px no-repeat; padding : 0px 0px 2px 35px; } ul.sidebar-categories li.sub-category { background: url(Images/nest1.png) 25px 1px no-repeat; padding : 0px 0px 2px 45px; } ul.sidebar-categories span { /* 記事数がゼロのとき */ font-size: 90%; color: #aaa; } ul.sidebar-archives li { /* サイドバーアーカイブ用 */ padding-right: 2em; text-align: right; } ul.sidebar-others { /* サイドバーOTHERS用 */ text-align: center; padding-top: 5px; } ul.sidebar-others li { } ul.sidebar-tags li { /* サイドバータグ用 */ display: inline; } ■■■■■■■■■■■■■■■■■■ <div id="recently"><h3 class="sidebar-cap" title="最近の書き込み"><span class="expand-icon" title="閉じる" onclick='toggleMenu("recently",this);return false;'></span> 最近の書き込み</h3> <ul class="sidebar-body sidebar-recently " style="display:block;"> <li><a href="index.php?UID=1150525379" title="テスト書き込みその2 2006/06/17">テスト書き込みその2</a></li> <li><a href="index.php?UID=1150524543" title="テスト書き込みその1 2006/06/17">テスト書き込みその1</a></li> </ul> <div class="sidebar-foot"></div><!--#sidebar-recently--> </div><!--#recently-->