テキストとそのテキストに付随するリスト画像を中央揃えにしたい。

###前提・実現したいこと
ここに質問したいことを詳細に書いてください
テキストとそのテキストに付随するリスト画像を中央揃えにしたい。
Titleをtext-align:center;にするとサンプルのテキストは中央揃えになるのですがリスト画像は中央揃えになってくれないです。同時に中央揃えしたいイメージです。説明が不足していたら申し訳ないです。よろしくお願いします。

###該当のソースコード

<style>
.title {
  font-size: 24px;
  background-color: #ec4040;
  padding: 20px 0;
  color: #fff;
  position: relative;
  text-align: center;
}
.title:before {
  content: '';
  display: inline-block;
  width: 7%;
  height: 40px;
  background: url("../img/sample.png") no-repeat;
  position: absolute;
  top: 23%;
  left: 18%;
}
</style>

<p class="title">サンプルサンプル</p>

###試したこと
Titleをtext-align:center;にするとサンプルのテキストは中央揃えになるのですがリスト画像は中央揃えになってくれないです。同時に中央揃えしたいイメージです。

行動規範の内容に同意します

回答2件

ベストアンサー

position:absoluteを使用しているなら、
left: 18%;を50%にしてtransform:translateを使用してみてください。
もしくは古いブラウザにも対応したいならばleft:0;right:0;margin:0 auto;でも左右中央寄せになります。

//例1
.title:before {
  content: '';
  display: inline-block;
  width: 7%;
  height: 40px;
  background: url("../img/sample.png") no-repeat;
  position: absolute;
  top: 23%;
  left: 50%;//左から50%移動させる
  transform: translate(-50%,0); //移動したところから50%戻す
  -webkit-transform: translate(-50%,0); //ベンダーフリックス追加
  -ms-transform: translate(-50%,0); //ベンダーフリックス追加
}

//例2
.title:before {
  content: '';
  display: inline-block;
  width: 7%;
  height: 40px;
  background: url("../img/sample.png") no-repeat;
  position: absolute;
  top: 23%;
  left:0; //左から0移動させる
  right:0; //右から0移動させる
  margin:0 auto; //左右ひっぱられているためautoを使うと中央寄せになる
}

投稿2017/08/25 02:17

編集2017/08/25 02:20