Demo Basically, I’m trying to setup something that looks like this: However, my code

Question

0

Editorial Team

Asked: June 9, 20262026-06-09T00:42:44+00:00 2026-06-09T00:42:44+00:00

Demo Basically, I’m trying to setup something that looks like this: However, my code

0

Demo

Basically, I’m trying to setup something that looks like this:

enter image description here

However, my code for some reason isn’t working. Fist of all, in teh tinkerbin, my arrow image isn’t even showing. It works fine on my computer though, so I’m not sure why this is. I also tried jsfiddle and it didn’t work there either.

I can get the arrow to be there just fine, but I can’t get the text to be centered vertically, let alone even go insie the gray box when the image is there. That is what is confusing me here.

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;
 }