まぁくんの店 仕事内容&雑談!! 四條畷
2012 / 11   «« ■ »»
01
T
02
F
03
S
04
S
05
M
06
T
 
07
W
 
08
T
09
F
 
10
S
 
11
S
 
12
M
 
13
T
 
14
W
 
15
T
 
16
F
 
17
S
 
18
S
 
19
M
 
20
T
 
21
W
 
22
T
 
23
F
 
24
S
 
25
S
 
26
M
 
27
T
 
28
W
 
29
T
 
30
F
 
meaning of mark :: nothing , comment
Pageview

Online Status




Profile
まぁくん
makun200.jpg
四條畷でまぁくんの店を経営しています
取扱商品は
印鑑(はんこ)・名刺・封筒・印刷関係全般・キーホルダー・サンドエッチング・レーザー加工・オリジナル商品・ハンドメイド商品
です

にほんブログ村 地域生活(街) 関西ブログへにほんブログ村 地域生活(街) 関西ブログ 四條畷情報へ
にほんブログ村 オヤジ日記ブログへにほんブログ村 その他生活ブログ 印鑑・ハンコへ
にほんブログ村 オヤジ日記ブログ 30代オヤジへブログランキング・にほんブログ村へ
ブログランキング・にほんブログ村へ人気ブログランキングへblogram投票ボタン
ブログランキング


MyYahoo!に追加
Googleに追加

ブックマークプラス by SEO対策



Menu

RSS & Atom Feed
■ まぁくんの店 仕事内容&雑談!! 四條畷
RSS1.0 / RSS2.0 / Atom0.3
■ 本日のお仕事
RSS1.0 / RSS2.0 / Atom0.3
■ おやじ運動日記
RSS1.0 / RSS2.0 / Atom0.3
■ 店主について
RSS1.0 / RSS2.0 / Atom0.3
■ はんこについて
RSS1.0 / RSS2.0 / Atom0.3
■ 新商品
RSS1.0 / RSS2.0 / Atom0.3
■ SEO対策 検索アップアップ ホームページ
RSS1.0 / RSS2.0 / Atom0.3
■ 地域情報(近所のお店)
RSS1.0 / RSS2.0 / Atom0.3
■ フリーCGI&PHP
RSS1.0 / RSS2.0 / Atom0.3
■ これからやろうとしてること
RSS1.0 / RSS2.0 / Atom0.3
■ 現在進行中
RSS1.0 / RSS2.0 / Atom0.3
■ 豆知識
RSS1.0 / RSS2.0 / Atom0.3
■ 雑談
RSS1.0 / RSS2.0 / Atom0.3
■ おやじ日記(家族の事)
RSS1.0 / RSS2.0 / Atom0.3
■ エコ活動
RSS1.0 / RSS2.0 / Atom0.3
■ ホームページ作成(CSS勉強中)
RSS1.0 / RSS2.0 / Atom0.3
■ CMSプログラム
RSS1.0 / RSS2.0 / Atom0.3
■ お勉強(資格試験)
RSS1.0 / RSS2.0 / Atom0.3

Pickup Photo!

Recent Diary

Recent Comments
■ Re:WebCart 質問 5
  └ mariko at 2010/12/02 13:48:42
  └ まぁくん at 2010/12/02 16:59:26
■ Re:WebCart 質問 4
  └ mariko at 2010/12/01 19:54:10
■ Re:WebCart 質問 3
  └ mariko at 2010/11/29 21:53:11








«« 年賀状印刷スタート!! | main | だだをこねる 幼稚園の長女!! »»
«« カテゴリ内前記事(無料期間の3ヶ月が過ぎました) | ホームページ作成(CSS勉強中) | カテゴリ内次記事(ホームページ振り分けPHP) »»
2009/12/04
ulとliの中央揃えCSS
新しくホームページの注文が入りました
画像の変更は終わって現在ホームページの型枠作りです
メニュー項目が
少ないのでどうしようか考え中です
左にメニューを置けばいいのか?中央に置けばいいのか悩み中です
犬の画像を小さく中央に15個並べるのに
ulとliを使おうとしていますが
ulをページの中央に持ってくるのが難しい
ただ、単に中央に揃えて下に並べるのは簡単ですが
liをfloatを使って横並びにしてそれを中央に揃えるのは難しい
ul liの中央揃えのCSS
今回は一般的な方法を記述します
html
<div id="menu">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
<li>777</li>
</ul>
</div>

CSS
<style type="text/css">
<!--
.#menu {
position: relative;
}
#menu ul {
list-style-type: none;
position: relative;
left: 50%;
display: inline;
float: left;
}
#menu li {
display: inline;
float: left;
margin-right: 5px;
margin-left: 5px;
position: relative;
left: -50%;
}
-->
</style>

サンプル
※
ここで必要なこと
ul
ポジション(位置)を相対的に指定すること
位置を50%で指定すること
li
ポジション(位置)を相対的に指定すること
位置を-50%で指定すること
ulをページの中央から初めてliをページの左端に設定することで
相殺して中央揃えになるという不思議なcssの設定です
他にもulの幅を指定して中央に揃える方法もあります
これだけではなく他にもいろいろと方法があるので
試してみてはどうでしょうか?
※備考
リストのスタイルはなし
liのマージンを5ピクセルとってます

にほんブログ村 オヤジ日記ブログ 30代オヤジへ

清き一票をお願いします


別ウインドウで開きます!!




下記はまぁくんの店の情報です
記す
大阪府 四條畷市 まぁくんの店(印鑑・名刺・印刷 ホームページ作成 SEO対策)






雑貨 格安 低価格 販売 新商品なんでも雑貨サイト商品検索
こどもの本なんでもデジモン屋雑貨屋2茶道日記


posted at 2009/12/04 10:35:57
lastupdate at 2009/12/04 10:35:57
【修正】
 
Comments

Post your Comment
name
mail
home
comment
文字装飾グラデーション絵文字