おしえて

HTML & CSS 縦ボックス内の文字の左右センタリング

解決済

質問者：gekikaraou
質問日時：2023/03/25 04:23
回答数：3件

こんにちは、リンク付きの縦のホバーメニューを作っていますが、左右のセンタリングだけがうまく行きません

画像の通り、pagemenu a と　pagemenu a:hover の部分を　赤枠内 .pagemenu の左右の中央にセンタリングしようと色々やってみたのですが、知識が足りず出来ません

ちなみにCSSを見ると解りますが、pagemenu は可変６％となっていますので、それに合わせて常にセンターに表示されることが必要です。

詳しい方、よろしくお願いいたします。

■　HTML
<div class="wrapper">
<div class="pagemenu">
<ul>
<li><p>車種メニュー</p></li>
<li><a href="#">★　★　★</a></li>
<li><a href="#">★　★　★</a></li>
<li><a href="#">★　★　★</a></li>
<li><a href="#">★　★　★</a></li>
<li><a href="#">★　★　★</a></li>
</ul>
</div>
</div>

■　CSS

.pagemenu
{
display: block;
background:#222222;
height: 100% ;
width : 6% ;
border : 1px solid #ff0000 ;
}

.pagemenu p
{
writing-mode: vertical-rl;
text-orientation: upright;
border-bottom: 1px solid #ccc;
border : 1px solid #ffffff ;
}

.pagemenu ul
{
list-style-type: none;
margin: 0 auto ;
padding: 0;
}

.pagemenu li
{
margin: 0;
padding: 0;
}

.pagemenu a
{
color: #fff;
text-decoration: none;
border: 1px solid #ccc;
writing-mode: vertical-rl;
text-orientation: upright;
}

.pagemenu a:hover
{
background-color: #ddd;
color: #222222;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.2ベストアンサー

回答者： gura_
回答日時：2023/03/25 09:24

gekikaraou さん

････pagemenu は可変６％となっていますので、それに合わせて常にセンターに表示･･････

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.pagemenu
{
display: block;
background:#222222;
height: 100% ;
width : 6% ;
border : 1px solid #ff0000 ;
}

.pagemenu p
{ color:#fff; /* 追加 */
writing-mode: vertical-rl;
text-orientation: upright;
border-bottom: 1px solid #ccc;
border : 1px solid #ffffff ;
}

.pagemenu ul
{ display:flex; flex-flow:column; align-items:center; /* 追加 */
list-style-type: none;
/* margin: 0 auto ; 削除 */
padding: 0;
}

.pagemenu li
{
margin: 0;
padding: 0;
}

.pagemenu a
{
color: #fff;
text-decoration: none;
border: 1px solid #ccc;
writing-mode: vertical-rl;
text-orientation: upright;
}

.pagemenu a:hover
{
background-color: #ddd;
color: #222222;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="pagemenu">
<ul>
<li><p>車種メニュー</p></li>
<li><a href="#">★　★　★</a></li>
<li><a href="#">★　★　★</a></li>
<li><a href="#">★　★　★</a></li>
<li><a href="#">★　★　★</a></li>
<li><a href="#">★　★　★</a></li>
</ul>
</div>
</div>
</body>
</html>

- 1
- 件

通報する

この回答へのお礼

助かりました

回答ありがとうございます。
全体の調整までしていただいて、助かりました！

通報する

お礼日時：2023/03/25 13:37

No.3

回答者： ssawatake
回答日時：2023/03/25 11:13

.pagemenu liに

text-align: center;　を追加する。

- 1
- 件

通報する

この回答へのお礼

ありがとう

ありがとうございます。

liでまとめてセンタリングすると言う事でしょうか。
無事で来ました！

通報する

お礼日時：2023/03/25 13:38

参考程度に

No.1

回答者： fujillin
回答日時：2023/03/25 08:44

こんにちは

方法はいろいろ考えられると思いますが・・・
ご提示のままの文書構成で良いものとして、LI要素内のAはinline要素なので、そのままセンタリングすれば良いのではないでしょうか？
.pagemenu li { text-align: center; }

ただし、これだけだとタイトル部分のP要素（＝ブロック要素）には影響しません。
また、P要素にはデフォルトマージンがあるので、この部分がセンタリングできていないと思います。
これを是正するなら、デフォルトを再定義して
.pagemenu p { margin: 0 auto; }
としておくとか。
あるいは、PタグをSPAN等に変えれば、LIのセンタリングだけで、中央揃えになるでしょう。

Pタグのままで、インライン表示することも考えられますが、デフォルトマージンをクリアする必要はあります。
.pagemenu p { display: inline; margin: 0; }