テキストの縦方向の位置合わせが適切に行われていないようです。
vertical-align: middle;
はインライン要素やテーブルセルに対してのみ有効であり、ブロック要素には効果がありません。
以下の CSS ではどうでしょうか。
ul.umuke {
list-style: none;
margin: 0 auto;
padding: 0px;
width: 100%;
color: #ffffff;
position: relative;
}
ul.umuke li {
background: #03006b; /*背景色*/
color: #ffffff;
margin-bottom: 3px; /*下のバーとの余白*/
border-bottom: solid 1px #dadada; /*下に灰色線*/
list-style-type: none !important; /*ポチ消す*/
text-align: left;
padding: 20px; /*全体にパディングを追加*/
display: flex;
align-items: center; /*縦方向の中央揃え*/
line-height: 1.0em;
}
Setouchi Kotori さん、お忙しいところありがとうございます。
確かにナビゲーションはいい感じになりましたが、
今度下の画像にかぶってしまいました。どうしたらいいでしょういか?
https://nihonjinji.jp/index.php/servicemuke/
該当箇所のコードが分かれば、お答えできるかもしれません。
(最初の状態(見た目)を覚えておらず・・・すみません。)
お手数かけます。元の状態に戻しました。よろしくお願いします。
https://nihonjinji.jp/index.php/servicemuke/
コードのご共有をお待ちしているところでございます。
失礼しました。コードは以下です。必要なところだけ抜きました。後は変わりません。
<ul class="umuke">
<li class="lmuke1"> 研修コース
</li>
<li class="lmuke2" ><a href="https://nihonjinji.jp/index.php/kangomuke/">< 訪問介護サービス事業向け
</li>
<li class="lmuke3"><a href="https://nihonjinji.jp/index.php/eventmuke/">< イベントプロデュース企業向け</a>
</li>
<li class="lmuke4" ><a href="https://nihonjinji.jp/index.php/servicemuke/">< サービス事業向け </a>
</li>
</ul>
<br />
<img src="https://nihonjinji.jp/wp-content/themes/sample/images/kensyu_service.jpg" alt="" border="0" />
<img src="https://nihonjinji.jp/wp-content/themes/sample/images/space.gif" widht="700" height="50" alt="" border="0" />
スマホで拝見したところ、もともと画像の上部がボタンの下に隠れてしまっていますね。
リストと画像の領域をそれぞれ div タグでくくり、マージンで調整するとよいのではないでしょうか。
ありがとうございます。 確かにリストと画像の領域をそれぞれ div タグでくくり、というのを忘れてました。 でもなぜか解決できなかったので、やむを得ず、margin-top で位置指定しました。
ひとまず解決したとのことで、よかったです^^
パソコン表示がおそらく意図されたとおりに表示されていないのではないかと思います。
よろしければ、以下のコードをお試しください。
<style>
ul.umuke {
list-style: none;
margin: 0 auto;
padding: 0;
width: 100%;
color: #ffffff;
position: relative;
}
ul.umuke li {
background: #03006b; /*背景色*/
color: #ffffff;
margin-bottom: 3px; /*下のバーとの余白*/
border-bottom: solid 1px #dadada; /*下に灰色線*/
list-style-type: none !important; /*ポチ消す*/
text-align: left;
padding: 15px 20px; /*上下に15px, 左右に20pxのパディング*/
display: flex;
align-items: center; /*縦方向の中央揃え*/
line-height: 1.0em;
}
ul.umuke li a {
color: #ffffff; /*リンクの色を白に*/
text-decoration: none; /*リンクの下線を消す*/
}
ul.umuke li a:hover {
text-decoration: underline; /*ホバー時に下線を表示*/
}
.section {
margin-bottom: 20px; /*セクション間の余白*/
}
img {
display: block;
max-width: 100%;
height: auto;
}
</style>
<div class="section">
<ul class="umuke">
<li class="lmuke1"> 研修コース</li>
<li class="lmuke2"><a href="https://nihonjinji.jp/index.php/kangomuke/">< 訪問介護サービス事業向け</a></li>
<li class="lmuke3"><a href="https://nihonjinji.jp/index.php/eventmuke/">< イベントプロデュース企業向け</a></li>
<li class="lmuke4"><a href="https://nihonjinji.jp/index.php/servicemuke/">< サービス事業向け </a></li>
</ul>
</div>
<div class="section">
<img src="https://nihonjinji.jp/wp-content/themes/sample/images/kensyu_service.jpg" alt="" border="0" />
<img src="https://nihonjinji.jp/wp-content/themes/sample/images/space.gif" width="700" height="50" alt="" border="0" />
</div>