文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > BOXのデザイン > DIVの文字位置

ブロック要素で縦中央揃えなどの文字位置指定するCSS

htmlの「div」などブロックの文字位置を縦中央(上下中央)や中心に揃えるのは単純ではなく、ある程度のCSS設定が必要となります。CSSにも色々な方法があります。

table-cell
DIVなどのブロック要素をTABLEタグのTDのように取り扱うことで縦位置を合わせることが出来ます。
FlexBox
CSSのFlexBox機能を利用することで文字の表示位置を上下左右・中央に指定できます。文字が複数行の場合は先頭文字合わせもできます。
position
position機能を利用することで、文字を任意の位置に自由に配置できます。文字が複数行の場合は先頭文字合わせもできます。
line-height
1行の高さを指定することで縦位置を調整できますが、複数行になった場合にCSSの変更が必要となるためおすすめではありません。

以下では「table-cell」「flex」「position」を使用した文字位置CSSが自動生成されます。生成された「html」「css」などのソースコードは、そのままコピー&ペーストでご利用ください。

DIVの文字位置を変更して見よう

使用するhtmlは同じですが、「table-cell」「flex」「position」で生成されるCSSは異なりますので、いろいろお試しください。

位置調整で使用するCSS
文字の位置
横位置
縦位置
文字の配置
テスト
使用したhtml
<div class="box" id="makeImg">
  <div>文字の配置<br>テスト</div>
</div>
生成したCSS
.box {
  margin         : auto;                 /* サンプル用 中央寄せ */
  box-sizing     : border-box;           /* 罫線も含む長さ      */
  width          : 280px;                /* BOXの幅             */
  height         : 150px;                /* BOXの高さ           */
  background     : #B0C4DE;              /* BOXの背景色         */
  border         : 3px solid #35557f;    /* 枠線の指定          */
 
  display        : table;                /* テーブル属性に変更  */
}
.box div {
  display        : table-cell;           /* セル属性に変更      */
  text-align     : center;               /* 横位置              */
  vertical-align : middle;               /* 縦位置              */
}
ページTOP
広告
広告
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン