疑似要素で入れた画像を中央配置したいです。
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 件
display: inline; じゃだめですか
text-align: center;は親要素にかけると子要素が横中央になるプロパティだし、display:block;の要素には効かないよ。
pの背景に画像を指定してbackground-position:left centerとbackground-size:50%じゃだめ？擬似要素必須？
safariだったら-webkit-をtransfromにつけないとだめですよ。IE9も対応させたいなら-ms-もいるし。
Can I use... Support tables for HTML5, CSS3, etc
http://caniuse.com/#search=transformp {
position:relative;
}
p:before {
position:absolute;
/* top left とかで位置調整 */
}
はダメなんでしょうか？？
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;
}
じゃダメなの？
これはどう？ボーダーにしてるけど、:beforeの背景に画像でいけると思うけど違う？
codepen
http://codepen.io/anon/pen/MYaBwV関連するトピックス