web-dev-qa-db-ja.com

テキストをdivの下部に揃える

私は別のcssプロパティでこれを処理することを学んだstackoverflowの他の投稿と答えからdivの下部にテキストを揃えようとしました。しかし、私はそれを成し遂げることができません。基本的に私のhtmlコードは次のようなものです。

<div style='height:200px; float:left; border:1px solid #ff0000; position:relative;'>
   <span style='position:absolute; bottom:0px;'>A Text</span>
</div>

FFでは、垂直線（折りたたまれたdiv）を取得するだけで、その横にテキストが書き込まれます。 divの崩壊を防ぐことができますが、テキストに合わせた幅がありますか？

csshtmltextvertical-alignment
48
parascus

フレックスソリューション

display: table-cellソリューションを使用する場合は問題ありません。しかし、ハッキングする代わりに、display: flex;を使用して同じことを達成するより良い方法があります。 flexは、 まともなサポート を持つものです。

.wrap {
  height: 200px;
  width: 200px;
  border: 1px solid #aaa;
  margin: 10px;
  display: flex;
}

.wrap span {
  align-self: flex-end;
}
<div class="wrap">
  <span>Align me to the bottom</span>
</div>

上記の例では、最初に親要素をdisplay: flex;に設定し、後で align-self をflex-endに使用します。これは、アイテムをflex親の最後にプッシュするのに役立ちます。

古いソリューション（flexを使用する意思がない場合に有効）

テキストを下に揃える場合は、そのために多くのプロパティを記述する必要はありません。display: table-cell;をvertical-align: bottom;と一緒に使用すれば十分です

div {
  display: table-cell;
  vertical-align: bottom;
  border: 1px solid #f00;
  height: 100px;
  width: 100px;
}
<div>Hello</div>

（またはJSFiddle）

92
Mr. Alien

これでFlexbox justify-content: flex-endでこれを行うことができます：

div {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  width: 150px;
  height: 150px;
  border: solid 1px red;
}
  
<div>
  Something to align
</div>

ご相談ください Flexboxが適切かどうかを確認します。

37
Zequez