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

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

ただいまの
回答率

90.35%

  • HTML5

    4282questions

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

  • CSS3

    2205questions

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

  • float(CSS)

    18questions

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

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

解決済

回答 5

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,128

penguin520

score 10

<!DOCTYPE html>
<html lang="ja">

<head>
<title>Title</title>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <script src=".js" type="text/javascript"></script>
    <link href="style.css" rel="stylesheet" type="text/css" media="screen,print">
</head>
<body>

<div id="body">

    <div id="aka">
    <h1 class="middle"></h1>
    </div>

    <div id="ao">
    <h2 class="middle"></h2>
    </div>

    <div id="midori">
    <h2 class="middle"></h2>
    </div>

    <div id="iro">
    <h2 class="middle">好きな色</h2>
    </div>

</div>

</body>

</html>
#body{
    width: 1000px;
    text-align: center;
    margin-left:auto;margin-right:auto;
    text-align:left;
}

#aka{
    width: 1000px;
    height: 300px;
    background-color: #ff0000;
    text-align: center;
    margin-left:auto;margin-right:auto;
    display:table-cell;
    vertical-align: middle;
}

#ao{
    width: 600px;
    height: 500px;
    background-color: #0000ff;
    text-align: center;
    margin-left:auto;margin-right:auto;
    display:table-cell;
    vertical-align: middle;
    float:left
}

#midori{
    width: 400px;
    height: 500px;
    background-color: #008000;
    text-align: center;
    display:table-cell;
    vertical-align: middle;
    margin-left:auto;margin-right:auto;
    float:right
}

#iro{
    width: 1000px;
    height: 300px;
    background-color: #00bfff;
    text-align: center;
    margin-left:auto;margin-right:auto;
    display:table-cell;
    vertical-align: middle;
    clear: right;
    clear: left;
}

.middle{

}

イメージ説明

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

float


を入れると

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


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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 5

checkベストアンサー

+3

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

    <div id="ao" style="display:flex; align-items:center;">
    <h2 class="middle" style="flex:1"></h2>
    </div>

    <div id="midori" style="display:flex; align-items:center;">
    <h2 class="middle" style="flex:1"></h2>
    </div>

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/31 07:30

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

    キャンセル

+3

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

/* ADD */
#ao, #midori {
    position: relative;
}
#ao .middle, #midori .middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

動くサンプル:https://jsfiddle.net/gqc2dn9t/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/31 07:28

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

    キャンセル

+1

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

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

div {
  display: flex;
  float: left;
  justify-content: center;
  align-items: center;
}

#body {
  display: block;
  width: 1000px;
}

#aka {
  width: 1000px;
  height: 300px;
  background-color: #ff0000;
}

#ao {
  width: 600px;
  height: 500px;
  background-color: #0000ff;
}

#midori {
  width: 400px;
  height: 500px;
  background-color: #008000;
}

#iro {
  width: 1000px;
  height: 300px;
  background-color: #00bfff;
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/31 07:28

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

    キャンセル

0

リンク内容

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/28 18:01

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

    キャンセル

  • 2017/03/28 18:09 編集

    http://tanihiro.hatenablog.com/entry/2014/04/01/002342
    URLの記事を読むと
    『要素分の高さしか無い。(float指定してるからね!)
    中央寄せもなにも上下に余白が無いから、寄るはずも無い。』
    とのことで、そのあたりが原因だと思っています。

    「パディングでそろえられるのではないか」
    との 方法を教えられたりしているのですが、
    いまいち、どうすればいいのか解りません。

    「いろいろな方法を教えてもらいたい」
    となり、質問にいたりました。

    キャンセル

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/28 18:00

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

    (130abc695f238c302ea7f5cf150a042d.png)のレイアウトが
    現在の状態で、
    (9a981038d5deda079a4fb4ff8a3ed4c6.png)のようにしたい
    という事が言いたかったのです、
    寝不足で、頭が回っていませんでした、申し訳ありませんです。

    キャンセル

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

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • HTML5

    4282questions

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

  • CSS3

    2205questions

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

  • float(CSS)

    18questions

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