132

リンクを画像の中央に配置しようとしていますが、コンテンツを垂直方向に移動できないようです。

<h4>More Information</h4>
<a href="#" class="pdf">File Name</a>

アイコンは22x22pxです

.pdf {
    font-size: 12px;
}
.pdf:before {
    padding:0 5px 0 0;
    content: url(../img/icon/pdf_small.png);
}
.pdf:after {
    content: " ( .pdf )";
    font-size: 10px;
}
.pdf:hover:after {
    color: #000;
}
4

10 に答える 10

151

vertical-align CSS属性に関するアドバイスを読んだ後、私自身の質問に答えました。ヒントをありがとう！

.pdf:before {
    padding: 0 5px 0 0;
    content: url(../img/icon/pdf_small.png);
    vertical-align: -50%;
}
于 2010-05-14T09:38:48.597 に答える
30

私はCSSの専門家ではありませんが、ディレクティブをvertical-align: middle;挿入するとどうなりますか？.pdf:before

于 2010-05-14T09:30:02.837 に答える
26

次のように、テーブルを使用してこれを実行することもできます。

.pdf {
  display: table;
}
.pdf:before {
  display: table-cell;
  vertical-align: middle;
}

次に例を示します：https ：//jsfiddle.net/ar9fadd0/2/

編集：これを達成するためにフレックスを使用することもできます：

.pdf {
  display: flex;
}
.pdf:before {
  display: flex;
  align-items: center;
}

次に例を示します：https ：//jsfiddle.net/ctqk0xq1/1/

于 2016-07-02T19:42:09.313 に答える
14

よりクリーンなアプローチは、垂直方向の配置を継承することだと思います。

HTMLの場合：

<div class="shortcut"><a href="#">Download</a></div>

そしてcssで：

.shortcut {
    vertical-align: middle;
}
.shortcut > a:after {
    vertical-align: inherit;
{

このようにして、アイコンは任意の解像度/フォントサイズの組み合わせで適切に配置されます。アイコンフォントでの使用に最適です。

于 2013-04-02T08:38:00.453 に答える
11

フレックスボックスを使用することで、私はうまくいきました。

.pdf:before {
    display: flex;
    align-items: center;
    justify-content: center;
}
于 2019-03-01T07:57:52.613 に答える
6

line-height属性をいじくり回すと、うまくいくはずです。私はこれをテストしていないので、正確な値は正しくないかもしれませんが、1.5emから始めて、整列するまで0.1刻みで微調整します。

.pdf{ line-height:1.5em; }
于 2010-05-14T09:35:02.770 に答える
5

私は今日これを解決するためにかなりの時間を費やしましたが、line-heightまたはvertical-alignを使用して物事を機能させることができませんでした。私が見つけた最も簡単な解決策は、<a />を相対的に配置して絶対を含むように設定し、：afterを絶対的に配置してフローから除外することでした。

a{
    position:relative;
    padding-right:18px;
}
a:after{
    position:absolute;
    content:url(image.png);
}

その場合、少なくともFirefox / Chromeでは、後の画像が自動的に中央に配置されるように見えました。<a />のスペースが多すぎるため、：afterをサポートしていないブラウザでは少しずさんなことがあります。

于 2013-11-22T09:53:20.247 に答える
5

これは私のために働いたものです：

.pdf::before {
    content: url('path/to/image.png');
    display: flex;
    align-items: center;
    justify-content: center;
    height: inherit;
}
于 2019-10-01T17:00:50.577 に答える
4

私はちょうどかなりきちんとした解決策を見つけたと思います。秘訣はline-height、画像（または任意のコンテンツ）のを設定することheightです。

文章

CSSの使用：

div{
  line-height: 26px; /* height of the image in #submit span:after */
}

span:after{
    content: url('images/forward.png');
    vertical-align: bottom;
}

それはおそらくスパンなしでも機能するでしょう。

于 2012-07-28T11:26:48.653 に答える
3

私も同様の問題を抱えていました。これが私がしたことです。垂直方向に中央揃えしようとした要素の高さは60pxだったので、次を使用して垂直方向に中央揃えにすることができました。

上：calc（50％-30px）;

于 2017-08-02T11:00:49.753 に答える