事業部垂直對齊

我有三個<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

事業部垂直對齊

回答

相關問題