Question

我有三个<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。

以下是它现在的样子：

请帮助我。

Answer 1

我认为徽标高度固定。您可以使用以下代码margin-top使用<div>：

<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;}

Answer 2

如果您为父元素提供以下CSS，那么您应该没问题：

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

Answer 3

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%);
}

Div垂直对齐

3 个答案: