事业部垂直对齐

我有三个<div>这样的：事业部垂直对齐

<div class="col-xs-12 col-md-4 "> 
        <img src="custom_images/logo3.png" /> 
       </div> 
       <div class="col-xs-6 col-md-4 text-center"> 
        <div class="input-group"> 
         <input type="text" class="form-control header_search" placeholder="Search Here....." aria-describedby="basic-addon1"> 
         <span class="input-group-addon search_span" id="basic-addon1" ><i class="fa fa-search "></i> </span> 
        </div> 
        <%--<div class=""> 
         <input type="search" placeholder="Search Here...." /> 
         <span style="background-color:#000;padding:10px;"> 
          <img src="custom_images/search.png" /></span> 
        </div>--%> 
       </div> 
       <div class="col-xs-6 col-md-4 text-right"> 
        <button class="cart_button"><span>Items in your cart</span> <span style="margin-left:25px;"><img src="custom_images/cart_item.png" /></span></button> 
        <span class="cart_items">15</span> 

       </div>

我不能垂直对齐他们在一条线上。我希望他们都像vertically-align: middle。

这里是如何看现在：

请帮我这个。

来源

2015-10-20 Sohil Shah

[在一个div元素的垂直取向]的可能的复制（http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div） – Jivings

@Jivings Nopes，不相关。 –

如果给父元素下面的CSS，你应该罚款：

element{ 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

来源

2015-10-20 12:02:13

它工作正常....但编辑器显示该属性是无效的CSS属性....可能是这将在未来删除.... –

哦，它不会被删除未来。这是全新的，这就是为什么编辑不知道属性。这是有效的，只是新的。 –

使用显示器柔性创建问题的响应....它显示了水平滚动条... –

我相信徽标是固定的高度。

<div class="col-xs-6 col-md-4 text-center adjust-top-height"> 
    <div class="input-group"> 
    <input type="text" class="form-control header_search" placeholder="Search Here....." aria-describedby="basic-addon1"> 
    <span class="input-group-addon search_span" id="basic-addon1" ><i class="fa fa-search "></i> </span> 
    </div> 
    <div class=""> 
    <input type="search" placeholder="Search Here...." /> 
    <span style="background-color:#000;padding:10px;"> 
     <img src="custom_images/search.png" /></span> 
    </div> 
</div> 
<div class="col-xs-6 col-md-4 text-right adjust-top-height"> 
    <button class="cart_button"><span>Items in your cart</span> <span style="margin-left:25px;"><img src="custom_images/cart_item.png" /></span></button> 
    <span class="cart_items">15</span> 
</div>

并在CSS

.adjust-top-height {margin-top: 15px;}

来源

2015-10-20 12:01:01

是啊谢谢...但我是一种调整。即使未来标识的高度发生变化，我也希望它完美无缺。所以我可能不担心它.. –

@SohilShah当然...好的，那么接受的答案是完美的。 '：）' –

您可以使用此顶部 <div>使用 margin-top

HTML：

<div class="header">  
    <div class="col-xs-12 col-md-4 header-element"> 
     <img src="custom_images/logo3.png" /> 
    </div> 
    <div class="col-xs-6 col-md-4 text-center header-element"> 
     <div class="input-group"> 
     <input type="text" class="form-control header_search" placeholder="Search Here....." aria-describedby="basic-addon1"> 
     <span class="input-group-addon search_span" id="basic-addon1"><i class="fa fa-search "></i> </span> 
     </div> 
    </div> 
    <div class="col-xs-6 col-md-4 text-right"> 
     <button class="cart_button"><span>Items in your cart</span> <span style="margin-left:25px;"><img src="custom_images/cart_item.png" /></span></button> 
     <span class="cart_items">15</span> 

    </div> 
</div>

CSS：

.header-element{ 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

来源

2015-10-20 12:07:27

事业部垂直对齐

回答

相关问题