Spanの背景画像が上にずれてしまいます

前提・実現したいこと

Spanで囲ったテキスト2行の左側にリストマークのように画像を配置したいのです。リストは使用せずにspan内で行いたいです。
よろしくお願いいたします。

発生している問題・エラーメッセージ

spanで囲ったテキストを<br>で2行に改行させ、テキストの左側に背景画像image.pngを設定し縦位置が中央配置したいのですが上にずれます。※スミマセンが画像を質問にどう添付していいのかわからないので画像は省略させてください。(20px × 20pxの画像です)
**![イメージ説明](cc5c5f4ea47beea4036236fed36962e1.png)　←　**画像を追加しました****

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title></title>
6<meta name="viewport" content="width=device-width">
7<style>
8<!--
9.test{
10	padding-left : 2.5em;
11	background-image : url(image.png);
12	background-repeat : no-repeat;
13	background-position : left center;
14	font-size : 14px;
15	text-align : center;
16	line-height : 1.5;
17	width : 30em;
18    height : 30px;
19}
20-->
21</style>
22</head>
23<body><span class="test">testtesttesttesttest<br>
24testtesttest</span>
25</body>
26</html>

試したこと

.testにline-height : 1.5;width : 30em;height : 30px;で画像の大きさ、設置場所を確保したつもりです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

退会済みユーザー

2019/07/03 02:41

webブラウザに組み込まれている開発者ツールあるいはデベロッパーツールなどを駆使して該当span要素をポイントすることで、そこに適用されているスタイルシートがわかるのですが、使い方はご存知でしょうか。活用なさっているでしょうか。

m.ts10806

2019/07/03 02:43

＞。※スミマセンが画像を質問にどう添付していいのかわからないので現象がわかる画面キャプチャを添付してもらえればと。

mather

2019/07/03 03:05

> 画像を質問にどう添付していいのかわからないのでそういうときはTeratailの公式ヘルプを探してみましょう。 https://teratail.com/help/question-tips#questionTips3-3-1

m.ts10806

2019/07/03 03:19

コードブロック内では他のマークダウンは無効になります。 PCですと右側にリアルタイムでプレビューが出るはずなので、そちらを見ながら調整してください。

mather

2019/07/03 04:56

ちなみに、画像でなくても「HTML プレイグラウンド」などで検索するとHTMLを書いてその場で確認できるサービスを使うこともできます。利用してみてはいかがでしょうか。 https://codepen.io/anon/pen/rEvPZY

kurobuta

2019/07/03 05:25

上記のソースを実行すると画像の下部分がテキストの1行目に揃って上部が消えてしまいます。HTMLやCSSを勉強し始めたもので、色々なことに関してまだまだ初心者です。可能であれば上記の質問で回答を募集したいです。駄目な場合は、方法はわかりませんが質問を削除したいです。宜しくお願い致します。

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

回答1件

ベストアンサー

css
1.test {
2   display: inline-block;
3   padding-left: 25px;
4   position: relative;
5 }
6
7.test::before {
8   content: "";
9   display: block;
10   width: 20px;
11   height: 20px;
12   background-image: url(image.png);
13   background-size: 20px;
14   position: absolute;
15   left: 0px;
16   top: 50%;
17   transform: translateY(-50%);
18 }