Search code examples
htmlcssstatistics-bootstrap

image between 2 inline-table divs - doesn't work with bootstrap

I'm working on some trading ingame items site, that's not important here.
My actual code is:

<div class="trade">
        <h6><strong>RaiZeN</strong> wants to trade: (5 minutes ago)</h6>
        <div class="items-holder">
            <div class="item-img" style="background-image:url('http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV08u_mpSOhcjnI7TDglRc7cF4n-T--Y3nj1H6-hBrMW_3LIOWdlU_MlGDqwO6wrvq15C6vp-bnHY36SAm4XbYl0SwhgYMMLJqUag1Og/360fx360f');">
                <div class="item-rarity">Field-Tested</div>
                <div class="pink"></div>
            </div>
            <div class="item-img" style="background-image:url('http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV08u_mpSOhcjnI7TDglRc7cF4n-T--Y3nj1H6-hBrMW_3LIOWdlU_MlGDqwO6wrvq15C6vp-bnHY36SAm4XbYl0SwhgYMMLJqUag1Og/360fx360f');">
                <div class="item-rarity">Field-Tested</div>
                <div class="pink"></div>
            </div>
        </div>

        <div class="arrow">
            <img src="http://i.imgur.com/dusRcnt.png" />
        </div>

        <div class="items-holder">
            <div class="item-img" style="background-image:url('http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV086jloKOhcj8NrrHj1Rd6dd2j6fA9ImniQex_UQ_NT-nJtKRJgU3aFHY_Vm-ybrqjMO56Z3OnXE27HIq-z-DyAtSAyL7/360fx360f');">
                <span class="item-rarity">Battle-Scared</span>
                <div class="red"></div>
            </div>
        </div>
    </div>

JSFIDDLE

As you can see, the arrow is not at same height as rest. But, if I will remove bootstrap (remove first html line), it works just fine. Problem is, I need to use bootstrap on my site. How can I fix that?

Solution

  • check this - https://jsfiddle.net/7curr49y/1/

    the changes i made are these - 

    .items-holder
{
    background-color: #E7E7E7;
    border-radius: 4px;
    padding: 10px;
    display: inline-block;
    border-collapse: separate;
    border-spacing: 10px 0px;
    vertical-align:middle;
}

    changed "inline-table" to "inline-block" and added "vertical-align:middle".

    hope that helps!