これは私のjsfiddleです。
「フォローする」リンクは、Twitterアイコンの横にあります。私が欲しいのは、css可能であればインラインスタイルを使用せずに、リンクを画像の垂直方向の中央に配置することです。
タグに直接クラスを追加してから<a>、マージンを調整してみました。それはうまくいきませんでした。
imgタグに直接クラスを追加してから、マージンを調整してみました。それはうまくいきませんでした。
マージンの代わりにパディングを調整して、これらの両方をもう一度試してみました。
これは私が設定した方法でさえ可能ですか、それとも私はhtml..または両方を変更する必要がありますか？
どんな提案でも大歓迎です！
とvertical-align:middleの両方を設定して、位置合わせすることができます。<a><img>
編集： http： //jsfiddle.net/Fn4vP/16/を参照
画像をfloat左に移動しline-height、aタグのを画像の高さと同じになるように変更します（この場合は19px）。「FollowUs」を囲むアンカーのみに線の高さをターゲットにするには、のようなクラスをアンカーに追加するだけ.followです。
HTML
<img src="imageURL.png" width="24px" height="19px">
<a href="#" class="follow"> Follow Us</a>
CSS
img { float: left; }
.follow { line-height: 19px; }
基本的line-heightに、画像を左にフロートし、リンクを左にフロートしてから、次の<h3>タグのフロートをクリアします。この部分を次のように変更します。
<!-- Dont forget to close your image tag. -->
<img src="http://i46.tinypic.com/2ly6hc4.png" width="24px" height="19px"/>
<a href="#" class="flw-link"> Follow Us</a>
<!-- Added class .flw-link to Follow us link -->
今あなたのCSSで：
/* Float the image and link to the left */
.twitter-feed img{float: left;}
/* Set the line-height of the text to center vertically to the image */
.twitter-feed .flw-link{float: left; line-height: 21px;}
/* Finally, clear your floats on the next tweet header */
.twitter-feed h3{clear: both;}
このjsfiddleをチェックしてください：http://jsfiddle.net/Fn4vP/25/
0テキストを一番上に配置する行の高さを変更するオプションが必要なため、このようにして両方の要素をフロートします。次に、line-height を使用して、テキストが垂直方向に配置される正確な場所をピクセルで制御できます。