Html 垂直对齐

我有三个这样的

：

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

购物车中的物品
15

我无法将它们垂直对齐。我希望它们都像

垂直对齐：中间

下面是它现在的样子：


请帮我解释一下。
我相信这个标志是固定高度的。您可以使用以下方法在顶部
上使用
页边距顶部
：

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

我相信这个标志是固定高度的。您可以使用以下方法在顶部
上使用
页边距顶部
：

<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，则可以：

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

如果为父元素提供了以下CSS，则可以：

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

HTML:

HTML:

可能重复的@Jivings不，不相关。可能重复的@Jivings不，不相关。是的，谢谢……但我认为这是一种调整。我希望它是完美的，即使高度的标志在未来的变化。所以我可能不担心…@Sohilsah当然。。。好吧，那么公认的答案是完美的<代码>：）
是的，谢谢……但我认为这是一种调整。我希望它是完美的，即使高度的标志在未来的变化。所以我可能不担心…@Sohilsah当然。。。好吧，那么公认的答案是完美的<代码>：）

它工作得很好…但是编辑器显示属性不是有效的css属性…可能这会在将来被删除…哦，它不会在将来被删除。它是全新的，这就是为什么编辑不知道属性。它是有效的，只是新的。使用display flex会给响应者带来问题…它会显示水平滚动条…如果你做了一把小提琴，我可以尝试为你解决它工作得很好…但是编辑器显示属性不是有效的css属性…可能这将在将来被删除…哦，它不会在将来被删除。它是全新的，这就是为什么编辑不知道属性。它是有效的，只是新的。使用display flex会给响应速度造成问题…它会显示水平滚动条…如果你做小提琴，我可以尝试为你解决这个问题

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