Bootstrap5.0 col内で画像とbuttonの上下中央寄せができない

Question

実現したいこと

Headerを作りたい。要件は以下。

• 左側にロゴ画像
• 右側にハンバーガーメニュー
• モバイル（iPhoneX）のみで動けばOK

直面している問題

以下のようにrowとgridでレイアウトを作ったとき，画像とハンバーガーメニューが上下中央寄せにできない。

試みた解決方法

• d-flex align-items-center

コード

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<header class="fixed-top">
	<nav class="navbar navbar-expand-lg navbar-light bg-light p-1">
		<div class="container-fluid">
			<div class="row">
				<div class="col">
					<div class="header-img">
						<a href="${fn:escapeXml(pageContext.request.contextPath)}/Index" class="navbar-brand"><img class="header"
							src="${fn:escapeXml(pageContext.request.contextPath)}/image/header.png"
							alt="header画像"></a>
					</div>
				</div>
				<div class="col">
					<div class="float-end">
						<button class="navbar-toggler" type="button"
							data-bs-toggle="collapse"
							data-bs-target="#navbarSupportedContent"
							aria-controls="navbarSupportedContent" aria-expanded="false"
							aria-label="Toggle navigation">
							<span class="navbar-toggler-icon"></span>
						</button>
					</div>
				</div>
				<div class="collapse navbar-collapse" id="navbarSupportedContent">
					<ul class="navbar-nav mr-auto">
						<li class="nav-item"><a class="nav-link text-center"
							href="${fn:escapeXml(pageContext.request.contextPath)}/Philosophy">理念</a></li>
						<li class="nav-item"><a class="nav-link text-center"
							href="${fn:escapeXml(pageContext.request.contextPath)}/Guide">利用方法</a></li>
						<li class="nav-item"><a class="nav-link text-center"
							href="${fn:escapeXml(pageContext.request.contextPath)}/Faq">FAQ</a></li>
						<li class="nav-item"><a class="nav-link text-center"
							href="${fn:escapeXml(pageContext.request.contextPath)}/Login">LOGIN</a></li>
						<li class="nav-item"><a class="nav-link text-center"
							href="${fn:escapeXml(pageContext.request.contextPath)}/Logout">LOGOUT</a></li>
					</ul>
				</div>
			</div>
		</div>
	</nav>
</header>

環境

• Bootstrap 5.0

補足

コード自体も未熟とは思います。何卒諸々含めてご教授いただけますと幸いです。

Comments

[m.ts10806]

何のフレームワークか分かりませんが、
タグに入れない以上は、コンパイル後のHTMLを提示されたほうが良いと思います。現状ではコピペで再現できませんので。

[hogwan]

回答ありがとうございます。Bootstrapはある程度有名なフレームワークと思っています。htmlタグまで明記しなかった理由としては，ドキュメントもそのような表記になっているためです。

https://getbootstrap.com/docs/5.0/getting-started/introduction/

また，個人的にHTMLのコンパイルというのがピンときません。また，コンパイル後のソースコードを公開するのは一般的でないと思うのですが，いかがでしょうか。

[hope_mucci]

質問文に書いてあるコードはjspですよね。
jspは制御コード等を記載するのでそのままをブラウザに表示しても意図通りの出力にならないことはよくご存じだと思います。
jspファイルの中身ではなく、最終的にブラウザで出力した際のソースコードを添付してくれ、というのがm.ts10806さんの追記依頼の趣旨です。
コンパイルではなくレンダリングと表現したほうが良かった感があります（jspをコンパイルするとclassファイルになってしまう）

[hogwan]

ご丁寧な追記ありがとうございます。腑に落ちました。

>最終的にブラウザで出力した際のソースコードを添付してくれ
非常に分かりやすいです。ありがとうございます。

Answer 1

とりあえず画像のような状態を再現解消するのが目的であれば、navの中の
container-fluid,row,colのコンテナとグリッドに関するdiv要素を削除すれば実現できます。
.navbarスタイルはデフォルトで中の要素を「上下中央寄せ」します。

ぶっちゃけnavbarの中身はグリッドシステムは不要です。チュートリアル通りに実装すれば全然問題ないはずです。

追記：

回答のようにcontainer-fluidとグリッドシステムに関わるタグを削除したらこのようになるデモ。
回答した内容はちゃんと検証していただきたい。

また、本文に表現の誤りがありましたので修正しました。申し訳ないです。

Comments

[hogwan]

回答ありがとうございます。

>とりあえず画像のような状態を再現するのが目的であれば
本文に記載の通り，画像は直面している問題であり，目指したい状態ではありません。

>チュートリアル通りに実装すれば全然問題ないはずです。
具体的にドキュメントのどの部分を参考にすればよいのでしょうか。おそらく，ほぼすべてのチュートリアルをそのまま試しましたが，うまくいきませんでした。

https://getbootstrap.jp/docs/5.0/components/navbar/

ここにも，画像を左寄せ，ハンバーガーメニューを右寄せするサンプルは置いていないように思えます。

[hope_mucci]

>とりあえず画像のような状態を再現するのが目的であれば
これは書き損じでした。本文を修正しています。申し訳ないです。
ついでに回答通りにタグを削除した状態のデモpenを追記しておきました。

> https://getbootstrap.jp/docs/5.0/components/navbar/
> ここにも，画像を左寄せ，ハンバーガーメニューを右寄せするサンプルは置いていないように思えます。
リンクのサイトをスマホで見てみましょう。bootstrapのドキュメントサイトは基本的に全レスポンシブ対応です。PCブラウザで幅を狭めても、検証ツールでデバイス指定しても良いです。

[hogwan]

検証までしていただき誠にありがとうございます。助かりました><

Answer 2

中央揃えしたい要素を Flex 親直下にし、Auto marginsで実装したら良いと思います。