text-alignプロパティの使い方・サンプルコード
Sara
text-align
text-alignプロパティは、ブロック要素やテーブルセル内のテキストの水平方向の表示位置を指定します。
使用できる値
セレクタ {
text-align: ここに値を指定;
}
| 値 | 表示サンプル | |
|---|---|---|
| start（初期値） | 行の開始位置に合わせる | あいうえお |
| end | 行の終了位置に合わせる | あいうえお |
| left | 左揃え | あいうえお |
| right | 右揃え | あいうえお |
| center | 中央揃え | あいうえお |
| justify | 最後の行を除いて、テキストが左右の端に揃うよう語間が調整されます。 | ここにテキストが入ります。ここにテキストが入ります。 |
| justify-all | 最後の行も含めて、テキストが左右の端に揃うよう語間が調整されます。 | * 多くのブラウザで非対応 |
| match-parent | 親要素の値を継承 | * 一部ブラウザで非対応 |
使用例
このサンプルではテーブル内の文字列を右揃えにしています。
HTML
<table class="table">
<tr>
<th>商品名</th>
<th>値段</th>
</tr>
<tr>
<td>商品A</td>
<td>¥1000</td>
</tr>
<tr>
<td>商品B</td>
<td>¥1500</td>
</tr>
</table>CSS
.table {
width: 30%;
border-collapse: collapse;
}
.table th, .table td {
border: 1px solid lightgrey;
padding: 10px;
text-align: right;
}
実行結果
対応ブラウザ
関連するHTML要素
関連するCSSプロパティ
Subscribe
0 Comments
ABOUT ME
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Java / Kotlin / PHP
>> 詳しいプロフィールはこちら
>> 書籍を出版しました！
>> お問い合わせはこちら
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Java / Kotlin / PHP
>> 詳しいプロフィールはこちら
>> 書籍を出版しました！
>> お問い合わせはこちら
