スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。



  

floatで横並びさせたリストとリスト内の画像をセンタリングする方法


floatで横並びさせたリストをセンタリングして、
さらにリスト内の画像をセンタリングする方法を紹介します。

1、floatで横並びさせたリストをセンタリング
リストを囲む<div>タグなどのid属性をlistとして下記のCSSをあてます。
 #list {
  position:relative;
  overflow:hidden;
}
#list ul {
  position:relative;
  left:50%;
  float:left;
}
#list li {
  position:relative;
  left:-50%;
  float:left;
}

2、画像のセンタリング
<div>タグの背景に画像を設定して、それをセンタリングします。
背景画像を設定した<div>タグに下記のCSSをあてます。
 .centerimg {
  width: 150px;
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
}


以上です。
画像のセンタリングは、<div>タグを使ってセンタリングしました(^_^;)
<img>タグでセンタリングするいい方法はないかな?
勉強しないと!
関連記事
スポンサーサイト



  

テーマ : WEBデザイン
ジャンル : コンピュータ

tag : HTML センタリング 画像 リスト

コメント

非公開コメント

検索フォーム
プロフィール

サトリヒロシ

Author:サトリヒロシ
ビジネスを重視した企画を支援したいエンジニアが、何かを書こうとするブログです。

サトリ潜伏先
サトリ倉庫

WEB関連の技術で調査リクエストがあればご連絡ください。

カレンダー
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
カテゴリ
最新記事
最新コメント
最新トラックバック
月別アーカイブ
RSSリンクの表示
リンク
QRコード
QRコード
FC2カウンター
スポンサードリンク
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。