画像をセル内の上下中央に配置する

CSS

<a> <img src="aaa.jpg"> </a> というソースがあったら、 a{ display: block; height: 100px; width: 100px; line-height: 100px; text-align: center; } img { vertical-align: middle; }画像ではなくテキストだと無理。

2014-11-08

liで横並びをfloatしないでdisplay: inline-block;をul下に余白マージンがつけられて便利。

CSS

↓元記事【CSS】ul,olのリストを横並びにするときにfloatじゃなくてdisplay:inline-blockを使う方法 http://delaymania.com/201404/web/list-inline-block/ いままでliをfloatしてリストつくっちゃうとulに高さがつかなくてリスト表示のしたのmarginやらpad…

2014-01-24

cssでフッターを下部に固定

CSS レスポンシブ

cssでフッターを下部に固定するのにいろいろ試したが、下記の方法が良かった。[CSS]ヘッダは上部固定で、フッタはコンテンツが少なくても最下部にするスタイルシート、レスポンシブにも対応！ http://coliss.com/articles/build-websites/operation/css/sti…

2014-01-21

レスポンシブデザイン max-width の最適設定を考察

レスポンシブ CSS

以前にメモしたスマートフォンの画面サイズComments http://d.hatena.ne.jp/miccholy/20130426/1366957528 をもとにレスポンシブデザインのmax-widthの最適設定（自分流）を考察してみた。結論： @media (max-width: 980px) {} 対象：PC、iPad3 @media (ma…

2010-02-04

画像とテキストの上下位置の合わせ方調整

CSS

いつも忘れてしまうのでメモテキストの横に並ぶ画像の位置合わせその１ http://css-el.seesaa.net/article/116207987.htmlテキストの横に並ぶ画像の位置合わせその２ http://css-el.seesaa.net/article/118021008.htmlvertical-align:middle; vertical-ali…

2009-11-11

Firefoxでサイトのフッターとブラウザになぞの隙間 clearfix問題

CSS

あるデザインテンプレートを利用したら、Firefoxでサイトのフッターとブラウザの間になぞの隙間ができていたのがずっと気になっていた。IEでは再現しなかった。目立たない部分なので解決を後回しにしていたのだが、やっとちゃんと調べてみたらこれが原因だっ…

2008-08-04

CSSでsupの位置を調整する Firefoxの位置調整

CSS

＜引用＞CSSでsup（上付き文字）を調整する http://kikinote.seesaa.net/article/36115396.html FireFox用上付き文字離れの調整 *>/**/sup { vertical-align: text-top; line-height: 4px; }