3

こんにちは、アイコンとボタンの説明テキストの両方がアイコンの横に配置されたリンク ボタンを作成しようとしています。「A」タグ内にパディングを追加して、テキストが常に垂直方向の中央になるようにしましたが、img を追加しようとしたところ、テキストが押し下げられ、その過程でボタンのサイズが大きくなりました。私が間違っているアイデアはありますか？

これらのボタンを小型デバイス向けにレスポンシブにしたいと考えています。ボタンのサイズは調整できますが、テキストとアイコンの配置が問題です。常に水平方向と垂直方向の両方の中央に配置したいからです。アイコンとテキストを使用してリンク ボタンを作成する簡単な方法はありますか? チュートリアル/アドバイスをいただければ幸いです。以下のコードを参照してください。ありがとう。

HTML:

<div id="reports_menu_wrapper">

    <div id="reports_menu_content">
        <a href="#" title="Product Charts"><span><img src="imgs/main_products.png" alt="" /></span>Product Charts</a>
        <a href="#" title="Speed Charts">Speed Charts</a>
        <a href="#" title="Financial Charts">Financial Charts</a>
        <a href="#" title="Usage Charts" id="usage">Usage Charts</a>
        <br class="clearFloat"/>
    </div>

CSS:

#reports_menu_wrapper 
{
width:100%;
height:auto;
background-color:pink;
margin-top:30px;
}

#reports_menu_content
{
width:824px;
height:auto;
margin:0 auto;
background-color:#fff;
padding:10px;
border:solid 1px #ccc;
}

#reports_menu_content a 
{
display:block;
float:left;
width:198.5px;
background-color:#eee;
padding:18px 0;
outline:solid 1px #ccc;
margin-right:10px;
text-transform:uppercase;
font-size:75%;
color:#333;
}

#reports_menu_content a:hover 
{
background-color:#e6e6e6;
}

#reports_menu_content #usage 
{
margin-right:0;
}


#reports_menu_content a img 
{
margin-right:10px;
}
4

2 に答える 2

2

必要なのは、タグbackground-image用でaあり、パディングを管理します。

#reports_menu_content a 
  {
   background:orange url('yourimage.png') no-repeat left center;
   padding:0 20px 0 42px; /*42 is equal to the padding left = the image size+10px*/
  }

また、テキストを中央verticalに配置するには、使用できます

line-height:40px;

ボタンごとに異なるアイコンが必要な場合は、スプライトを使用できます。

これをチェックしてくださいhttp://jsfiddle.net/Px2zu/8/

于 2013-11-14T16:46:41.490 に答える
0

css プロパティを使用してvertical-align、要素を別の要素に対して垂直方向に中央揃えにすることができます。ただし、この要素はインライン要素でなければならないことに注意してください。あなたの場合、要素をテキストの垂直方向の中央に配置したいので、このプロパティに値middleを指定して要素に適用する必要があります。img

a img {
  vertical-align: middle;
}

個人的にはline-height、テキスト ノードを垂直方向に中央揃えするために を使用するのではなく、 を使用することを好みますpadding。しかし、それはどちらの方法でも機能します。

ただし、css クラスを使用してアイコンとボタンを作成することをお勧めします。この.btクラスは、サイズ、ボーダー、マージンなどの基本的なボタン スタイルを適用します。.icoクラスは、別のクラスを使用して適用されるアイコンのオフセットを設定するために使用されます。このクラスはアイコンにちなんで名付けられ、backgroundプロパティを設定します。したがって、アイコンに矢印が表示されている場合は、おそらく.arrow. ちなみにinline要素をフローティングさせると自動的に要素としてレンダリングされるので、プロパティblockは必要ありません。display

.bt {
    padding: 0 15px;
    float: left;
    border: 1px solid #ccc;
    font: 12px/36px Arial, "sans-serif";
    color: #000;
    text-decoration: none;
}

.bt.ico {
    padding-left: 41px;
}

.ico.arrow {
    background: url("https://cdn0.iconfinder.com/data/icons/entypo/58/under1-16.png") 15px center no-repeat;
}

また、余分なノードを使用してフロートをクリアしていることにも気付きました。私の知る限り、この目的のために追加のマークアップを使用することは、データが含まれていないためお勧めできません。より良い方法は、疑似要素を使用することです。次の css プロパティを使用し:afterてラッパーに適用された疑似要素は、フロートをクリアします。#reports_menu_content

.clear:after {
  display: block;
  content: '';
  clear: both;
}

また、クラスを使用して、他のラッパーにも適用できるようにします。

上記の点を示す小さなフィドルを用意しました: http://jsfiddle.net/w33Vk/5/

于 2013-11-14T18:58:36.200 に答える