CODEWITHSUNDEEP
css
Igor Yavych
Igor Yavych

Reputation: 4238

Align vertically in div with other elements

So I'm trying to vertically align span element inside of div parent. Div parent got two children, div and span in question.

Image to demonstrate what I have and what I want enter image description here

Current mark up

<div class="agmtwr_container">
    <div class="agmtwr_shape_container">
        <span class="agmtwr_shape agmtwr_voted"></span>
        <span class="agmtwr_shape agmtwr_voted"></span>
        <span class="agmtwr_shape agmtwr_voted"></span>
        <span class="agmtwr_shape agmtwr_voted"></span>
        <span class="agmtwr_shape agmtwr_empty"></span>
    </div>
    <span class="agmtwr_vote_count">6 votes</span>
</div>

Original CSS (before any attempts to center)

.agmtwr_shape_container {display:inline-block;height:16px;width:80px}
.agmtwr_shape{padding:0px;margin:0px;display: inline-block; background-size: 100% 100%;width:16px;height: 16px;}
.agmtwr_empty {background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"><polygon fill="#D0D0D0" points="10,0 13.1,6.6 20,7.6 15,12.8 16.2,20 10,16.6 3.8,20 5,12.8 0,7.6 6.9,6.6 "/></svg>');}
.agmtwr_voted {background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"><polygon fill="#B8000A" points="10,0 13.1,6.6 20,7.6 15,12.8 16.2,20 10,16.6 3.8,20 5,12.8 0,7.6 6.9,6.6 "/></svg>');}

I have tried few suggested things with line-height, etc, but it just doesn't seem to work =/ I'd like to avoid table related solution.

Upvotes: 0

Views: 65

Answers (3)

Dejan Munjiza
Dejan Munjiza

Reputation: 798

You can use:

.agmtwr_container span {
    vertical-align: middle;
}

Upvotes: 2

Shamanth
Shamanth

Reputation: 216

Try Padding bottom,

.agmtwr_vote_count
{
    padding-bottom:2px;
}

Upvotes: 0

Pepo_rasta
Pepo_rasta

Reputation: 2900

use vertical align:

.agmtwr_container *{
  vertical-align:middle;
}

Upvotes: 0

Related Questions