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

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

ただいまの
回答率

90.76%

  • HTML

    8347questions

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

  • CSS

    5358questions

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

  • HTML5

    3742questions

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

CSSリセットにすると、display:inlineでもvertical-align:middleにしてdiv要素内の文字を上下中央に配置できない。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 229
退会済みユーザー

退会済みユーザー

でCSSリセットをすると、display:inlineでもvertical-align:middleにしてdiv要素内の文字を上下左右中央に配置できません。

またCSSリセットのせいか、display:flex;のせいか分かりませんが、div要素内のpaddingのどこかをautoの設定にすると、paddingが突然効かなくなります。
これは仕様でしょうか?
以下はコードです。
CSS

*{
margin:0;
padding:0;
}
#yoko{
display:-webkit-flex;
display:flex;
border:solid 1px #CCC;
padding:20px 10px 20px auto;
}


HTML

<div id="yoko">
<div>
testtesttest
</div>
<div>
<img src="images/hoge.jpg" alt="test" />
</div>
</div>


vertical-alignの問題
CSS

*{
margin:0;
padding:0;
}
#wapper{
width:900px;
margin:20px auto;
}
#header{
margin:20px auto;
padding:15px 20px;
border:solid 1px #CCC;
}
h1{
color:green;
font-size:58px;
}
#contents{
border:solid 1px #CCC;
padding:10px;
overflow:auto;
}
#left{
float:left;
width:45%;
}
#manner{
margin:0px 10px 20px 10px; 
border:double 5px blue;
overflow:auto;
padding:5px;
}
#manner div{
float:left;
width:70%;
}
#manner img{
float:right;
width:25%;
height:auto;
margin-top:5px;
}
#syacho3{
margin:auto 10px 20px 10px;
border:solid 1px blue;
overflow:auto;
padding:5px;    
}
#syacho3 img{
float:left;
width:25%;
height:auto;
margin-top:5px;
}
#syacho3 div{
float:right;
width:70%;
}
#rina3{
margin:auto 10px 20px 10px; 
border:solid 1px blue;
overflow:auto;
padding:5px;
}
#rina3 div{
float:left;
width:70%;
}
#rina3 img{
float:right;
width:25%;
height:auto;
margin-top:5px;
}
#syacho4{
margin:auto 10px 20px 10px;
border:solid 1px blue;
overflow:auto;
padding:5px;    
}
#syacho4 img{
float:left;
width:25%;
height:auto;
margin-top:5px;
}
#syacho4 div{
float:right;
width:70%;
}
#right{
float:right;
width:45%;
}
#keigo{
overflow:auto;
}
#keigo img{
display:block;
margin:auto;
height:420px;
}
#sodan{
border:solid 1px blue;
overflow:auto;
margin:20px auto auto auto;
padding:5px;
}
#sodan div{
float:left;
width:70%;
}
#sodan img{
float:right;
width:25%;
height:auto;
margin-top:5px;
}
#footer{
clear:both;
display:inline;
vertical-align:middle;
border:solid 1px #CCC;
text-align:center;
margin-top:20px;
}


HTML

<!DOCTYPE html>
<html>
<head>
<title>無題ドキュメント</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<div id="wapper">
<div id="header">
<h1>test</h1>
<p>testは、~です。</p>
</div>
<!--header_end-->
<div id="contents">
<div id="left">
<div id="manner">
<div>
<p>
あかさたなは2まやらわ1あかさたなはまやわあかさたなはまやらわあかさたなはまや
わあかさたなはまやらわ
</p>
</div>
<img src="images/lake1web.jpg" alt="見本" />
</div>
<!--manner_end-->
<div id="syacho3">
<img src="images/lake1web.jpg" alt="見本" />
<div>
あかさたなはまやらわ
</div>
</div>
<!--syacho3_end-->
<div id="rina3">
<div>
あかさたなはまやらわ
</div>
<img src="images/lake1web.jpg" alt="見本" />
</div>
<!--rina3_end-->
<div id="syacho4">
<img src="images/lake1web.jpg" alt="見本" />
<div>
あかさたなはまやらわ
</div>
</div>
<!--syacho4_end-->
</div>
<!--left_end-->
<div="right">
<div id="keigo">
<img src="images/lake1web.jpg" alt="見本" />
</div>
<!--keigo_end-->
<div id="sodan">
<div>
あかさたなはまやらわ
</div>
<img src="images/lake1web.jpg" alt="見本" />
</div>
<!--sodan-->
</div>
<!--right_end-->
<div id="footer">
株式会社トラスト
</div>
<!--footer_end-->
</div>
<!--contents_end-->
</div>
<!--wapper_end-->
</body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2018/01/25 00:49

    「リセット」は提示のものだけでしょうか。「突然効かなくなります」についてはコードを提示してください。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2018/01/25 01:02

    リセットは提示のものだけです。

    キャンセル

  • kei344

    2018/01/25 02:35

    回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。

    キャンセル

  • kei344

    2018/01/25 03:18

    バッククオート3つの前後には改行を入れてください。PCであれば記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。

    キャンセル

回答 2

checkベストアンサー

+2

よくやる勘違いですが, vertical-alignプロパティは(そのまま)親要素に対する文字列の縦位置を指定するものではありません

vertial-alignプロパティは適用する要素のdisplayプロパティ値によって意味合いが変化します.

  • display:table-cellの場合
    直感的な意味合いでの「上揃え(top)」「中央揃え(middle)」「下揃え(bottom)」を指定します.
  • それ以外の場合
    文字列の基底線(baseline つまり文字揃えの縦位置の基準)を親要素のどの基底線に合わせるかを指定します.

参考
https://developer.mozilla.org/ja/docs/Web/CSS/vertical-align

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+2

padding:20px 10px 20px: auto; この時点で記述が間違っています。
少なくとも padding:20px 10px 20px auto; こう書くべきです。(autoは値として不適ですが)

また、margin と違い padding に auto はありません。

【padding - CSS | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/padding

【margin - CSS | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/margin

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/01/25 02:37

    ありがとうございます。
    paddingにautoがないののはじめて知りました。
    引き続き、vertical-align:middle;の方も質問を受け付けます。

    キャンセル

  • 2018/01/25 02:39

    問題がおこるコードを載せるくらいはされてはいかがでしょう。

    キャンセル

  • 2018/01/25 02:46

    すみません。
    説明すると課題は家に持って帰ってできないのでコードを直接貼ることはできないです。
    かすかな記憶で貼ることもできますが、言葉で説明した方がいいかなと思いそうしました。

    キャンセル

  • 2018/01/25 02:51

    では言葉で説明しますが、書き方の問題です。
    HTMLとCSSはブラウザがあればいくらでも書いて試すことができるので、問題が起こる状況を再現して質問文に提示してください。

    キャンセル

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

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

関連した質問

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

  • HTML

    8347questions

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

  • CSS

    5358questions

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

  • HTML5

    3742questions

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

  • トップ
  • HTMLに関する質問
  • CSSリセットにすると、display:inlineでもvertical-align:middleにしてdiv要素内の文字を上下中央に配置できない。