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

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

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

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

float(CSS)

これはCSSのfloatプロパティのタグです。指定された要素を左または右に寄せて配置する際に使用します。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

5回答

2996閲覧

{float:}を入力した<div>要素の中の文字の高さを変更する方法

penguin520

総合スコア345

CSS3

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

float(CSS)

これはCSSのfloatプロパティのタグです。指定された要素を左または右に寄せて配置する際に使用します。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2017/03/28 07:33

編集2017/03/28 09:14

HTML5

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5<title>Title</title> 6 <meta charset="UTF-8"> 7 <meta name="description" content=""> 8 <meta name="keywords" content=""> 9 <script src=".js" type="text/javascript"></script> 10 <link href="style.css" rel="stylesheet" type="text/css" media="screen,print"> 11</head> 12<body> 13 14<div id="body"> 15 16 <div id="aka"> 17 <h1 class="middle">赤</h1> 18 </div> 19 20 <div id="ao"> 21 <h2 class="middle">青</h2> 22 </div> 23 24 <div id="midori"> 25 <h2 class="middle">緑</h2> 26 </div> 27 28 <div id="iro"> 29 <h2 class="middle">好きな色</h2> 30 </div> 31 32</div> 33 34</body> 35 36</html> 37

CSS

1#body{ 2 width: 1000px; 3 text-align: center; 4 margin-left:auto;margin-right:auto; 5 text-align:left; 6} 7 8#aka{ 9 width: 1000px; 10 height: 300px; 11 background-color: #ff0000; 12 text-align: center; 13 margin-left:auto;margin-right:auto; 14 display:table-cell; 15 vertical-align: middle; 16} 17 18#ao{ 19 width: 600px; 20 height: 500px; 21 background-color: #0000ff; 22 text-align: center; 23 margin-left:auto;margin-right:auto; 24 display:table-cell; 25 vertical-align: middle; 26 float:left 27} 28 29#midori{ 30 width: 400px; 31 height: 500px; 32 background-color: #008000; 33 text-align: center; 34 display:table-cell; 35 vertical-align: middle; 36 margin-left:auto;margin-right:auto; 37 float:right 38} 39 40#iro{ 41 width: 1000px; 42 height: 300px; 43 background-color: #00bfff; 44 text-align: center; 45 margin-left:auto;margin-right:auto; 46 display:table-cell; 47 vertical-align: middle; 48 clear: right; 49 clear: left; 50} 51 52.middle{ 53 54}

イメージ説明

上記図のように「赤」「青」と書いてあるテキストを
上下左右の中央にCSSで、そろえようとしましたが、

CSS

1float

を入れると

CSS

1 display:table-cell; 2 vertical-align: middle;

を入力しても高さがうまく揃いません。
いろいろな方法があると思いますが、
どうすれば、よいでしょうか。

下の図にように
うまく「青」と「緑」が
中央の高さに表示されません。
イメージ説明

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

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

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

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

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

guest

回答5

0

Flexboxが正解だと思いますが、「文字を中央」ならこういう方法もあります。

CSS

1/* ADD */ 2#ao, #midori { 3 position: relative; 4} 5#ao .middle, #midori .middle { 6 position: absolute; 7 top: 50%; 8 left: 50%; 9 transform: translate(-50%,-50%); 10} 11```**動くサンプル:**[https://jsfiddle.net/gqc2dn9t/](https://jsfiddle.net/gqc2dn9t/)

投稿2017/03/28 14:51

kei344

総合スコア69357

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

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

penguin520

2017/03/30 22:28

kei344さん、いつもありがとうございます。 positionも試してみます。
guest

0

ベストアンサー

flexboxを利用してみてはどうでしょう。
面倒なのでstyle属性でcssを書いてしまっていますが、こういったcssで縦中央に文字を表示させることができます。

html

1 <div id="ao" style="display:flex; align-items:center;"> 2 <h2 class="middle" style="flex:1"></h2> 3 </div> 4 5 <div id="midori" style="display:flex; align-items:center;"> 6 <h2 class="middle" style="flex:1"></h2> 7 </div>

flexboxはcssでかなり自由に要素を並べることができるので、使い方を把握しておくと便利ですよ。
今回の質問の場合は、青と緑のdivを横に並べて表示するのにもfloatを使うよりもflexboxを使ったほうが綺麗なコードになるかと思います。
(floatレイアウトは、flexboxというものが存在しなかった時代の手法なので)

投稿2017/03/28 09:18

編集2017/03/28 09:29
ku__ra__ge

総合スコア4524

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

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

penguin520

2017/03/30 22:30

flexboxを教えてくださってありがとうございます。 社内で共有してみたいと思います。 「floatレイアウトは、flexboxというものが存在しなかった時代の手法」 というアドバイスが、とても参考になりました。 ありがとうございます。
guest

0

Flexboxはこちらで試しながらいろいろ学べます。
Flexbox Playground
Flexy Boxes

私の場合はこうしてみました。

CSS

1div { 2 display: flex; 3 float: left; 4 justify-content: center; 5 align-items: center; 6} 7 8#body { 9 display: block; 10 width: 1000px; 11} 12 13#aka { 14 width: 1000px; 15 height: 300px; 16 background-color: #ff0000; 17} 18 19#ao { 20 width: 600px; 21 height: 500px; 22 background-color: #0000ff; 23} 24 25#midori { 26 width: 400px; 27 height: 500px; 28 background-color: #008000; 29} 30 31#iro { 32 width: 1000px; 33 height: 300px; 34 background-color: #00bfff; 35}

投稿2017/03/28 14:38

編集2017/03/28 14:39
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

penguin520

2017/03/30 22:28

わかりやすい説明ありがとうございます、勉強してみます。
guest

0

上記のコードで、(130abc695f238c302ea7f5cf150a042d.png)のレイアウトになるようですが、質問の意図はあっていますでしょうか?

投稿2017/03/28 08:53

ikemon

総合スコア39

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

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

penguin520

2017/03/28 09:00

すいません、質問につかった絵が間違っていました。 日本語もおかしかったので修正しました。 (130abc695f238c302ea7f5cf150a042d.png)のレイアウトが 現在の状態で、 (9a981038d5deda079a4fb4ff8a3ed4c6.png)のようにしたい という事が言いたかったのです、 寝不足で、頭が回っていませんでした、申し訳ありませんです。
guest

0

リンク内容

文字が上にいかないとかだったらうまくいってるように見えるけど。高さもあってそうだし。
こっち?
リンク内容

投稿2017/03/28 08:51

編集2017/03/28 09:21
toutou

総合スコア2050

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

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

penguin520

2017/03/28 09:01

すいません、質問につかった絵が間違っていました。 日本語もおかしかったので修正しました。
penguin520

2017/03/28 09:12 編集

http://tanihiro.hatenablog.com/entry/2014/04/01/002342 URLの記事を読むと 『要素分の高さしか無い。(float指定してるからね!) 中央寄せもなにも上下に余白が無いから、寄るはずも無い。』 とのことで、そのあたりが原因だと思っています。 「パディングでそろえられるのではないか」 との 方法を教えられたりしているのですが、 いまいち、どうすればいいのか解りません。 「いろいろな方法を教えてもらいたい」 となり、質問にいたりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問