画像の中に配置した文字の高さを調整する方法

質問

画像の中に文字を配置したのですが、文字の高さの調整ができなくて困ってます。

文字の位置の高さを中央ではなくて、少しだけ上に表示したいです。

なぜかというと、画像は次のサイトにある、グローバルナビゲーションのような画像だからです。
http://www.bookoff.co.jp/

画像を中央に表示してしまうと、上記サイトのグローバルナビゲーションのように下にラインがあるから、画像と文字のバランスが悪くなってしまいます。

そのため、少しだけ、文字を上に移動させたいのです。

このような場合、文字を調整することはできるのでしょうか？

回答No.2

ORUKA1951 · ベストアンサー

★画像の上に文字を配置する場合の高さ調整はline-heightとheightの組み合わせで行うのが良いでしょう。
★背景画像に文字が入っている場合は、
・下のボーダーが画像でない場合はbackground-position
・ボーダーを含めて画像の場合はheight
★リンクが画像--<a href=""><img></a>の場合は画像自体を変更する。

質問内容から、リンクは画像ではないようですから上の二つが対策になります。
[例]HTML4.01
<div class="nav">
　<ul>
　　<li><a href="/search">お店を探す</a></li>
　　<li><a href="/net">ネットで売る・買う</a></li>
　　<li><a href="/sell">売りたい</a></li>
　　<li><a href="/buy">買いたい</a></li>
　　<li><a href="/service">サービス・サポート</a></li>
　　<li><a href="/profile">会社情報</a></li>
　</ul>
</div>
だと
div.nav{
width:90%;min-width:640px;max-width:1000px;
margin:0 auto;
text-align:center;
font-size:12px;
}
div.nav ul,div.nav ul li{
list-style:none;margin:0;padding:0;
line-height:24px;height:30px;
}
div.nav ul{display:block;}
div.nav ul li{display:inline-block;width:16%;}
div.nav ul li:last-child{margin-left:6px;}
div.nav ul li a{
display:block;width:100%;height:100%;
background-color:blue;color:white;text-decoration:none;
border-radius:5px 5px 0px 0px;
}
div.nav ul li a:hover{background-color:rgb(200,200,255);}

[HTML5]
<nav>
　<ul>
　　<li><a href="/search">お店を探す</a></li>
　　<li><a href="/net">ネットで売る・買う</a></li>
　　<li><a href="/sell">売りたい</a></li>
　　<li><a href="/buy">買いたい</a></li>
　　<li><a href="/service">サービス・サポート</a></li>
　　<li><a href="/profile">会社情報</a></li>
　</ul>
</nav>

nav{
width:90%;min-width:640px;max-width:1000px;
margin:0 auto;
text-align:center;
font-size:12px;
}
nav ul,nav ul li{
list-style:none;margin:0;padding:0;
line-height:24px;height:30px;
}
nav ul{display:block;}
nav ul li{display:inline-block;width:16%;}
nav ul li:last-child{margin-left:6px;}
nav ul li a{
display:block;width:100%;height:100%;
background-color:blue;color:white;text-decoration:none;
border-radius:5px 5px 0px 0px;
}
nav ul li a:hover{background-color:rgb(200,200,255);}

お礼

ありがとうございます！

試してみます！

回答No.1

outbrave

どの画像かわかりませんが？

ナビゲーションの画像（お店を探す）は文字入りなので調整はできません、画像を作りなおしてください。

他人のサイトを勝手に使ってるってことではないですよね。

お礼

ありがとうございます。