お世話になっております。
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;
}
よろしくお願いいたします!!!!!
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
エビゾー さん
・・・・・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>
No.1
- 回答日時:
こんにちは
中央寄せにする方法はいくつかありますが、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のままだと全体サイズは画面サイズをはみ出します。
(スクロールバーが表示される)
このため、隠れている部分も含めての「中央配置」になる関係から、画面の見た目では中央より若干寄って見える場合があります。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS imgとpを縦・横に中央揃えする 1 2023/01/17 11:30
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
div要素が重なってします
-
name="description"が効きません
-
1時間30分を簡単に表したいで...
-
複数のボタンを等間隔に、かつ...
-
divを横に並べる方法
-
html5でheaderの中にnav
-
HTML属性での「""」 「''」違い
-
ヘッダーを左右に二分割する方...
-
htmlのolやulなどlistにtitleや...
-
cssで見出しが複数行になると先...
-
開閉式の隠し要素が一瞬表示さ...
-
IE・NNの独自タグについて
-
floatで5個のdivをうまく配置し...
-
DWでhtml5で記述するとCSSが反...
-
中央寄せ
-
極々シンプルなHP作成したいの...
-
html divボックスの入れ子で中...
-
overflow-x : hiddenが効かない;
-
ホームページ作成会社を探して...
-
style属性と外部CSSの非整合性...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
div要素が重なってします
-
min-heightとheightの違いについて
-
ヘッダーとフッターだけ背景を...
-
1時間30分を簡単に表したいで...
-
divを横に並べる方法
-
html5でheaderの中にnav
-
スペースを使わず文字位置を揃...
-
セクションをdivで囲むと見出し...
-
divとpの使いわけ
-
ブログのサイドバーが下にくる
-
3カラムレイアウトで「常に残り...
-
グリッドレイアウトで"auto-fit...
-
iframeを使わずに上下50%ずつに...
-
画面を縮小するとカラムが落ち...
-
ヘッダーを左右に二分割する方...
おすすめ情報