*

:beforeや:afterを使用した際、アイコンとテキストの上下を中央に合わせる

   

毎回やり方を忘れてしまうので自分用のメモです。
※スマホ用でやってるので、IEなどのブラウザでは確認してません
p1

スポンサードリンク

スマホで、よく「テキストの前後にアイコンを置いて~」ていう、ボタンを作ることがあると思います。
ただ、アイコンとテキストの並びをベースラインで合わせてしまうらしく、バランス悪いことになってしまいます。
p2

<p class="map"><a href="#">地図を表示する</a></p>
p.map {
	background:#555;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
p.map a {
	display:block;
	padding:13px 10px;
	color:#FFF;
	font-size:12px;
	line-height:1.4;
	text-align:center;
}
p.map a:before {
	background:url(../img_common/icn_pin.png) 0 0 no-repeat;
	-webkit-background-size:11px 15px;
	content:"";
	display:inline-block;
	width:11px;
	height:15px;
	padding-left:5px;
}

どうやったら良いバランスになるのか、いじくり回してましたが、「:before(または:after)」のcssに「position:relative;」を追加して調整したらうまくいきました。相対配置でよかったらしい。
p3

p.map a:before {
	/*追加のCSS*/
	position:relative;
	top:3px;
}

※上下の中央揃えではなくて、topで調整してバランスとってる感じです。

 -iPhone, Web

Sponsored link

Sponsored link

  関連記事

お仕事で使えるフリーで商用利用可の写真素材とアイコン素材のサイト

あんまりやらない素材集の紹介です。 10年前くらい(゜゜)…って、まだ写真素材とかも割りと海外のフリーのものを頑張って探

no image

モバイルでGooglemapを表示 その1

なんでか今まで機会がなくて、やったことなかったモバイルでGooglemapを表示。 自分の備忘録。 【コピペ用】 表示自

数量の入力部分をプルダウン(ドロップダウン)に変更する[カラーミーカスタマイズ]

人生初の入院と手術が無事終わり、今週からお仕事復帰でございます。 さて本題です。カラーミーショップのカスタマイズについて

no image

大塚商会のアルファメールプラチナにwordpressをインストール

大塚商会のアルファメールに苦戦したので、今後のために残しておきます。 まず、大前提としてなのですが プラチナの場合、wo

「mal/htmlgen-a」が検出されたとしてブロック→ブロックが解除されるまでの対応

それはある日突然起こりました。自分のブログがブロックされました(汗 (※現在は解決しました) 私は「Sophos」のMa

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

共働きの30代女性。
福岡でWebに携わってます。
主に自分用の細かいメモを書いてます。
細かい内容が多いですが、他の方にも役立つなら幸いです。

ブログの記事を紹介していただきました

このブログ更新するの、約1年ぶりか(汗) すごいお久しぶりです。 このブログを始めてもう地味に10年くらい経つのですが(

確定拠出年金、退職したときに行う手続き(継続するor掛金停止する)

私、昨年から確定拠出年金をしております。 会社には確定拠出年金の制度がなかったので、「個人型年金」の加入者として掛金の拠

実は先月で退職しました

だいぶブログさぼっておりましたが、実は先月末で会社を退職しました。 別にこの歳になって、自主退職したわけじゃないのです。

  • ブログランキング・にほんブログ村へ