テキストボックスを画像の下に回り込ませない方法｜web bibo
/* CSS（スタイルシート）に関する知識・テクニックなどの備忘録 */ 文字サイズ 大 中 小 現在のページ： HOME » CSS レイアウト・ボックス » テキストボックスを画像の下に回り込ませない方法 画像のサイズが変わっても、隣接するテキストボックスは画像の下に回り込まず、なおかつ、テキストボックスのサイズが画像に合わせて自動的に変わる方法をご紹介します。 画像のサイズが変わってもテキストが折り返さない 大きい画像から小さい画像に差し替えることになっても、テキストが折り返すことはなくなるので、簡単に更新作業ができます。 HTML 下記の通りHTMLを記述します。 <div class="box"> <img src="images/text_wrap.jpg" alt="" /> <p>text text text text text text tex
ボックスの内容物を上下中央揃えにする方法3種。｜web bibo
↑CSSだけでこんな感じに上下中央揃えを実現させるテクニックです。 ・1行のみのテキストを中央揃えにする場合 ・2行以上のテキストまたは画像を中央揃えにする場合 ・可変する要素を中央揃えにする場合 1行のみのテキストを中央揃えにする場合 <!-- HTML --> <div> <p>1行のみのテキストに有用</p> </div> /* CSS */ div{ width: 200px; height: 100px; background: #DDDDFF; text-align: center; } p{ line-height: 100px; } →1行のみのテキストを中央揃えにするサンプル line-heightは行間のスペースを制御するプロパティです。なので、2行以上の文などには利用できません。1行だけの場合には簡単に実装できる有用な方法です。 2行以上のテキストま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
