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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

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

CSS

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

Q&A

解決済

3回答

354閲覧

上下左右を中央にしたい

scoa

総合スコア66

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/08/09 05:18

編集2017/08/09 05:29

いつもお世話になります。

下記のイメージのようなナビゲーションを作成したいのですが、
テキスト部分の上下左右の中央が上手くいきません。

※何行になっても上下左右中央にしたいです。

サンプル

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="Shift_JIS"> 5 <meta name="robots" content="noindex"> 6 <title>サンプル</title> 7 8 <style> 9 .table { display:table; width:600px; height:200px; background:#bbb; text-align:center; } 10 .table ul { display:table-cell; vertical-align:middle; } 11 .table li { display:inline-block; padding:20px; background:#fff; } 12 </style> 13 14</head> 15<body> 16 17 18 19<div class="table"> 20 <ul> 21 <li>ほげほげほげ</li> 22 <li>ほげほげほげ<br>ほげほげほげ</li> 23 <li>ほげほげほげ<br>ほげほげほげ<br>ほげほげほげ</li> 24 </ul> 25</div> 26 27 28 29</body> 30</html>

恐れ入りますが、
ご教示の程よろしくお願いいたします。

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

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

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

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

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

kei344

2017/08/09 05:21

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
scoa

2017/08/09 05:28

ご指摘ありがとうございます。コードを追記しました。よろしくお願いいたします。
guest

回答3

0

ベストアンサー

css

1div{ 2width:300px; 3height:200px; 4border:1px solid #000000; 5background-Color:#404040; 6display:table-cell; 7text-align:center; 8vertical-align:middle; 9font-weight:bold; 10color:#ffffff;}

html

1<div>ほげほげほげ</div> 2<div>ほげほげほげ<br> 3ほげほげほげ</div> 4<div>ほげほげほげ<br> 5ほげほげほげ<br> 6ほげほげほげ</div>

投稿2017/08/09 05:29

yambejp

総合スコア114572

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

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

0

いろんな方法がありますが、

html

1<div class="table"> 2 <ul> 3 <li>ほげほげほげ</li> 4 <li>ほげほげほげ<br>ほげほげほげ</li> 5 <li>ほげほげほげ<br>ほげほげほげ<br>ほげほげほげ</li> 6 </ul> 7</div>

css

1.table{ 2 width:600px; 3 height:200px; 4 background:#bbb; 5 position: relative; 6} 7 8.table ul{ 9 position: absolute; 10 top: 50%; 11 left: 50%; 12 -webkit-transform: translateY(-50%) translateX(-50%); 13 transform: translateY(-50%) translateX(-50%); 14}

投稿2017/08/09 05:36

LanHma

総合スコア192

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

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

0

「上手くいきません 」がどのような状況かはわかりませんが、上下左右中央表示にはいくつか方法があります。

【[CSS]レスポンシブ対応の最新版!サイズが不明な要素を天地左右の中央に配置するスタイルシートのまとめ | コリス】
http://coliss.com/articles/build-websites/operation/css/css-centering-horizontally-and-vertically.html

投稿2017/08/09 05:33

kei344

総合スコア69364

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問