下記のように画面いっぱいにしたHTMLをCSSを記述しています。 imgとｐが横中央・縦中央にする為にはどのようにしたらよろしいでしょうか。イメージ図を添付いたします。どなたかご教授よろしくお願いいたします。 ■HTML ほげほげほげほげほげほげ ■CSS div.widthfull{ position: relative; width:100vw; margin-left:calc( ( 100% - 100vw ) / 2 ); min-height: 100vh; background-image:url(./img/bg.jpg) ; }

詳しい人求む！

imgとpを縦・横に中央揃えする

解決済

質問者：エビゾー
質問日時：2023/01/17 11:30
回答数：1件

下記のように画面いっぱいにしたHTMLをCSSを記述しています。
imgとｐが横中央・縦中央にする為にはどのようにしたらよろしいでしょうか。
イメージ図を添付いたします。
どなたかご教授よろしくお願いいたします。

■HTML
<header>
<div class="widthfull">
　<img src="./img/logo.jpg">
　<p>ほげほげ<br>ほげほげ<br>ほげほげ</p>
</div>
</header>

■CSS
div.widthfull{
position: relative;
width:100vw;
margin-left:calc( ( 100% - 100vw ) / 2 );
min-height: 100vh;
background-image:url(./img/bg.jpg) ;
}

background-image:url(./img/bg.jpg) ;
上記の位置の話ではなく、下記の部分の位置となります。

<img src="./img/logo.jpg">
　<p>ほげほげ<br>ほげほげ<br>ほげほげ</p>

補足日時：2023/01/17 11:56
通報する

通報する

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

質問の本文を隠す

回答 (1件)

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

No.1ベストアンサー

回答者： gura_
回答日時：2023/01/17 13:18

エビゾーさん

　････imgとｐが横中央・縦中央に･･･････

例えばこのようにします。↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
div.widthfull{ display: flex; flex-flow: column; justify-content: center; align-items: center;
position: relative;
width:100vw;
min-height: 100vh;
background-image:url(https://oshiete.xgoo.jp/images/v2/common/profile … ;
}
</style>
</head>
<body>
<header>
<div class="widthfull">
<img src="https://oshiete.xgoo.jp/images/feeling/qjiro/pc/ …
<p>ほげほげ<br>ほげほげ<br>ほげほげ</p>
</div>
</header>
</body>
</html>