質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

252閲覧

css 上下中央に配置したい

Samples

総合スコア14

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/06/23 13:38

編集2019/06/23 13:39

画面の上下左右中心に配置したいです。
何が足りないのでしょうか?

やりたいこと
・divを2つ並べた<div class="wrapper position">を上下左右に配置したい

できたこと
・左右中央に配置はできた

コードは下記の通りです。

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

index.vue <div id="main"> <v-container> <div class="wrapper position"> <div class="con-img"> <img v-bind:src="func4_img"> </div> <div class="con-text">    text </div> </div> </v-container> </div>
.css div#main { background-color: #fff; height: 100vh; } .wrapper { display: flex; width: 100%; } .position { justify-content: center; align-items: center; } .con-img { width: 70%; } .con-text { width: 30%; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

div#mainにflexをかけて、その子にmarginをかければいいんぢゃないでしょうか。。。?

CSS

1 2div#main { 3 background-color: #fff; 4 height: 100vh; 5 display: flex; /* ここと */ 6} 7 8.wrapper { 9 display: flex; 10 width: 100%; 11} 12 13.position { 14 justify-content: center; 15 align-items: center; 16 margin: auto; /* ここ */ 17} 18 19.con-img { 20 width: 70%; 21} 22 23.con-text { 24 width: 30%; 25}

投稿2019/06/23 13:43

mankoman

総合スコア70

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Samples

2019/06/23 13:48

正直なにがどうなって直ったのかわかりませんが、中央になりました! ありがとうございます。
Samples

2019/06/23 14:14

お二方ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問