16

私は次のcssコードを持っています：

.readMore:before {
    content: '';
    display: block;
    float: left;
    width: 10px;
    height: 27px;
    margin: 0;
    background: red url('images/button.png');
    background-position: 0 0;
}

.readMore {
    float: left;
    height: 24px;
    background: url('images/button.png');
    background-position: -10px 0;
    border: 0;
    margin: 0;
    padding: 4px 0 0 0;
    cursor: pointer: 
}

.readMore:after {
    content: '';
    display: block;
    float: right;
    width: 10px;
    height: 27px;
    margin: 0;
    top: -3px;
    background: red url('images/button.png');
    background-position: -411px 0;
}

次のようなリンクのスタイルは次のとおりです。 ここに画像の説明を入力してください

ただし、.readMoreのテキストを垂直方向に調整しようとすると、：beforeおよび：after画像も「ジャンプ」します。どちらが論理的ですが、「全体像」との整合性を高めるための解決策はありますか？

4

2 に答える 2

29

absolute私は:before 要素と :after 要素の配置を使用する傾向があります。次に、疑似要素がどこにでも移動することを心配することなく、親に対してやりたいことを何でも行うことができます (もちろん、要素自体を移動しない限り)。

JSFiddleで見る

html

<div></div>

CSS

div {
  position: relative;
  background: #eee;
  width: 25px;
  height: 25px;
  margin: 30px 0 0 30px;
}
div:before {
  position: absolute;
  width: 10px;
  height: 25px;
  top: 0;
  left: -10px;
  content:"";
  background: #222;
}
div:after {
  position: absolute;
  width: 10px;
  height: 25px;
  top: 0;
  right: -10px;
  content:"";
  background: #222;
}

これは、私がそれらをどのようにレイアウトするかを示しています。その後、任意の方法を使用して、親のテキストの位置を調整できます。

上記のコードの要点は次のとおりです。

  1. 親は相対的に配置されています。これにより、その子である疑似要素に絶対配置を使用して、それらを親に対して相対的に配置できます。
  2. 要素を境界線同士にしたい場合、前後の要素の左と右の位置はそれぞれ幅と同じです。

親のテキストをdiv垂直方向の中央に配置する必要があり、それが 1 行だけの場合は、line-height をコンテナーの高さと同じに設定できます。こちらをご覧ください。これは、パディングを「推測」して垂直方向の中央に配置するよりも優れています。

もちろん、テキストを垂直方向に中央揃えにする方法は他にもあります。そのため、この件に関する SO の質問はたくさんあります。ここに 1 つだけあります。

于 2013-01-07T13:10:21.783 に答える