基本的に、私は次のようなものをセットアップしようとしています:
ただし、何らかの理由で私のコードが機能しません。まず第一に、ティンカービンでは、私の矢印の画像すら表示されません。ただし、私のコンピューターでは正常に動作するため、これがなぜなのかはわかりません。jsfiddle も試しましたが、そこでも機能しませんでした。
矢印をうまく配置できますが、テキストを垂直方向に中央に配置することはできません。画像がそこにあるときに灰色のボックスに入れることさえできません。それがここで私を混乱させているものです。
HTML:
<div id="answers">
<div id="arrowcenter"></div><div id="answerstext">Text Next To Arrow</div>
</div><!-- end grayAnswer -->
CSS:
#answers {
width:220px;
height:50px;
background-color:#DDDDDD;
border-top:1px solid black;
border-bottom:1px solid black;
margin-top:20px;
}
#arrowcenter {
width:71px;
height:31px;
background-image:url('http://fortmovies.com/brazil/arrow.png');
background-position:0 50%;
background-repeat:no-repeat;
height:100%;
margin-left:-140px; }
#answerstext {
margin-top:0;
}