web-dev-qa-db-ja.com

CSSの垂直方向に整列する：beforeおよび：afterコンテンツ

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

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

アイコンは22 x 22ピクセルです

.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;
}
csscss-content
97
theorise

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

.pdf:before {
    padding: 0 5px 0 0;
    content: url(../img/icon/pdf_small.png);
    vertical-align: -50%;
}
113
theorise

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

23
Chowlett

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

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

以下に例を示します。 https://jsfiddle.net/ar9fadd0/2/

編集：flexを使用してこれを達成することもできます。

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

以下に例を示します。 https://jsfiddle.net/ctqk0xq1/1/

16
fassl

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

HTMLで：

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

そしてCSSで：

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

これにより、アイコンは解像度/フォントサイズの組み合わせで適切に整列します。アイコンフォントでの使用に最適です。

10
Sander van den Akker

Line-height属性をいじってみてください。私はこれをテストしていませんので、正確な値は正しくないかもしれませんが、1.5emから始めて、それが整列するまで0.1ずつ調整します。

.pdf{ line-height:1.5em; }
6
Mathew

フレックスボックスを使用すると、私のためのトリックをしました：

.pdf:before {
    display: flex;
    align-items: center;
    justify-content: center;
}
5
David Refoua

私はちょうどきれいな解決策を見つけたと思います。トリックは、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;
}

これはおそらくスパンなしでも機能します。

4
JoomFever

今日、これを解決するためにかなりの時間を費やしましたが、行の高さまたは垂直方向の配置を使用して作業を行うことができませんでした。私が見つけた最も簡単な解決策は、絶対位置を含むように<a/>を相対的に配置すること、および：afterを絶対にフローから外して配置することでした。

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

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

4
Kenneth M. Kolano

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

top：calc（50％-30px）;

1
user2606576