ID:y0Ucg1 さんの質問

疑似要素で入れた画像を中央配置したいです。
p要素の前にライン代わりの画像を入れたいのですが、以下のCSSでtext-align: centerのみ効いていませんでした。
原因がわかる方がいらっしゃいましたら、アドバイスいただきたいです。

p {
margin: 5px 0 5px 10px;
}

p:before {
content: url(line.png);
display: block;
text-align: center;
transform: scale(0.5);
}

試しにpの背景として画像を配置したところ中央に配置されました。
また、pの左マージンを消しても結果は変わりませんでした。
ご回答お願いします。

みんなの回答 7 件

ID:/Jf9mQ さんの回答

display: inline; じゃだめですか

ID:y0Ucg1

画像のサイズを縮小したいので、ブロック要素にしないとダメなんです。

ID:D8xdt1 さんの回答

text-align: center;は親要素にかけると子要素が横中央になるプロパティだし、display:block;の要素には効かないよ。

ID:D8xdt1

試してないけどこれでいけるんじゃないか?
p:before {
content: url(line.png);
display: block;
width: XXXpx;
margin:0 auto;
transform: scale(0.5);
}

ID:y0Ucg1

試してみましたが、表示結果は変わらずでした。

ID:D8xdt1

やってみたけど、上記のコードで行けるじゃん...
中央揃えにすらならないなんて、キャッシュが残ってるか、
IE7以下で閲覧してるかの二択しか考えられん。

ID:y0Ucg1

確認したのは最新のChrome、Firefox、Safariです。
キャッシュも削除してます。

ID:D8xdt1

列挙してるブラウザならばどれでもいける。
従って記述がミスってるんじゃない?
わかってると思うけど、widthとmargin:0 auto;を利用した
一般的な中央揃えの手法だから、widthはコンテンツ幅じゃなくて
画像の幅を指定しないと、中央揃えされないよ。

ID:D8xdt1

てか一番下の人が同じやり方してるから参考にしてみ。

ID:x0Wwdl さんの回答

pの背景に画像を指定してbackground-position:left centerとbackground-size:50%じゃだめ?擬似要素必須?

ID:y0Ucg1

背景に他の画像が入る可能性があるのと、画像の意味的に疑似要素で置くのが正しいかなと思って疑似要素でできないかと思案しています。
もう少し試してみて、どうしてもダメだったら背景画像として表示することにします。

ID:A.PEpX さんの回答

safariだったら-webkit-をtransfromにつけないとだめですよ。IE9も対応させたいなら-ms-もいるし。

Can I use... Support tables for HTML5, CSS3, etc

http://caniuse.com/#search=transform
ID:y0Ucg1

ベンダープレフィックスは全てつけています。
質問では長くなるだけなので削除しています。

ID:WisErf さんの回答

p {
position:relative;
}
p:before {
position:absolute;
/* top left とかで位置調整 */
}
はダメなんでしょうか??

ID:y0Ucg1

レスポンシブというほどではないですが、ある程度画面幅の変動に対応できるようにしているので、幅が狭くなった時にはみ出てしまいます。

ID:DMmcEi さんの回答

text-align: center;効くけど・・・
.
ただのラインなら
p:before {
content: "";
display: block;
width: xxx%;
height: xxx%;
background: url(line.png) no-repeat;
background-size: 100% 100%;
margin: 0 auto;
}
じゃダメなの?

ID:y0Ucg1

背景にすれば中央配置になることは確認できていますが、疑似要素でできないかと思って質問しました。
text-align: centerは普通は効くと思います。ブラウザで要素を検証しても有効になっていますし。
ただ、それを外しても変化がないということは、別のことが原因で無効化されているんだと思います。

ID:x0Wwdl さんの回答

これはどう?ボーダーにしてるけど、:beforeの背景に画像でいけると思うけど違う?

codepen

http://codepen.io/anon/pen/MYaBwV
ID:y0Ucg1

現状pの背景で中央配置にしていましたが、後ほど試してみます。
わざわざ調べてくださってありがとうございます。

最終更新日:2014-12-03 (6,171 views)

関連するトピックス

ページ上部に戻る