Как выровнять текстовое поле, href по горизонтали в css3

Question

Я хочу выровнять текстовое поле, 2 тега href имеет горизонтальное расположение в качестве родительского div. в то время как я двигаюсь отзывчиво, этот стиль хочет оставаться прежним.

<div class="filter_container" > 
    <input type="text" name="cusid" max-length="10" placeholder="Search Work Category" maxlength="10" id="search_wc" class="inp"> 
    <a href="#" class="add_cate" onclick="add_activity(this);"><img src="images/add_so.png" title="Add Activity" rel="tooltip" /></a> 
    <a href="#" class="add_cate" onclick="add_category(this);"><img src="images/add_so.png" title="Add Workcategory" rel="tooltip" /></a> 
</div> 
/* css */ 
.filter_container{ 
    display: block; 
    width: 90%; 
    margin: 5px auto; 
    text-align: left; 
    overflow: auto; 
} 
.add_cate{ 
    display: inline-block; 
    vertical-align: middle; 
    text-align: right; 
    margin: 5px; 
} 
.inp { 
    font-size: 22px; 
    width: 80%; 
    float: left; 
    padding:5px 10px; 
    outline: none; 
    margin: 5px 0; 
    border: 1px solid white; 
} 

Answer 1

Попробуйте этот код:

DEMO

CSS

img 
{ 
    width:100%; 
} 
.add_cate{ 
    display: inline-block; 
    margin: 2%; 
    width: 46%; 
    float: left; 
}