急いでいます！

img と p を縦中央に配置したいのですがうまくいきません。

締切済

質問者：エビゾー
質問日時：2023/01/12 14:38
回答数：2件

お世話になっております。
imgとpを縦中央・横中央に配置したのですが、縦中央が何をしても効いてくれません。
どのように指定をしたらよろしいでしょうか。

■HTMLソースコード
<header>
<div class="widthfull">
<div class="header_left">
<img src="./img/img_idea02.gif">
</div>
<div class="header_right">
<p></p>
</div>
</div>
</header>

■CSS
div.widthfull{
position: relative;
width:100vw;
margin-left:calc( ( 100% - 100vw ) / 2 );
min-height: 100vh;
background-color: white;
text-align: center;
}
div.header_left{
width: 49%;
display: inline-block;
height: 100vh;
background-color: blue;
}
div.header_right{
width: 49%;
display: inline-block;
height: 100vh;
background-color: red;
display: inline-block;
vertical-align: top;
}

よろしくお願いいたします！！！！！

通報する

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

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： gura_
回答日時：2023/01/12 22:05

エビゾーさん

　･････imgとpを縦中央・横中央に配置･･････

こういう事ですか。↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
div.widthfull{ display: flex; justify-content: space-between;
position: relative;
background-color: white;
}
div.header_left{ display: flex; justify-content: center; align-items: center;
width: 49%;
height: 100vh;
background-color: blue;
}
div.header_right{ display: flex; justify-content: center; align-items: center;
width: 49%;
height: 100vh;
background-color: red;
}

</style>
</head>
<body>

<header>
<div class="widthfull">
<div class="header_left">
<img src="./img/img_idea02.gif">
</div>
<div class="header_right">
<p>ppp</p>
</div>
</div>
</header>

</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！
したい事がでました！

通報する

お礼日時：2023/01/13 15:35

No.1

回答者： fujillin
回答日時：2023/01/12 18:55

こんにちは

中央寄せにする方法はいくつかありますが、imgはインライン要素、pはブロック要素と違いがありますので、両方ともに使える方法で・・
（ただし、両者ともposition:absoluteにして表示しています）

以下を追加設定ではいかがでしょうか？
div.header_left,
div.header_right {
position: relative;
}

div.header_left>img,
div.header_right>p {
position:absolute;
max-width: 100%;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}

※ 親要素のdivに対して中央寄せで配置します。
だだし、ご提示のCSSのままだと全体サイズは画面サイズをはみ出します。
（スクロールバーが表示される）
このため、隠れている部分も含めての「中央配置」になる関係から、画面の見た目では中央より若干寄って見える場合があります。