Question: [Demo](http://tinkerbin.com/JeCiz2uq)

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

![enter image description here](https://i.stack.imgur.com/fjdnv.png)

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

```

Answer: 
Just remove `margin-left:-140px;` and add `float:left;` to `#arrowcenter`

**[Working Demo](http://tinkerbin.com/cxAJaKCQ)**
***[Working Demo](http://tinkerbin.com/xBzHqAyi)***

OR

Use this CSS

```
    #answers
    {
        width: 220px;
        height: 50px;
        background-color: #DDDDDD;
        border-top: 1px solid black;
        border-bottom: 1px solid black;
        margin-top: 20px;
    }
    #arrowcenter
    {
        width: 100px;
        height: 50px;
        background-image: url('http://fortmovies.com/brazil/arrow.png');
        background-position: left center;
        background-repeat: no-repeat;
        float:left;
    }
    #answerstext
    {
        line-height:50px;
        margin-left:10px;
        font-size:20px;
        font-family:Arial;
        font-weight:bolder; 
    }

```

Use this in HTML :-

```
<div id="answers">
    <div id="arrowcenter">
        &nbsp</div>
    <div id="answerstext">
        Masculino</div>
</div>

```

I hope it'll helps!! :)