Question

在我的网站标题中，我有3个div。对于徽标，搜索输入和购物车链接。我想将这3个.col-md-4 div垂直居中对齐。

div有一个align-items-center类，但是它并没有满足我的要求，因为divs垂直居中。

<div class="header">
    <div class="container">
        <div class="row">
            <div class="col-md-4 d-flex justify-content-center justify-content-md-start align-items-center">
                <a href="#" title="" class=""><img src="images/assets/logo.png" alt="" class="img-fluid"</a></a>
            </div>
            <div class="col-md-4 d-flex justify-content-center justify-content-md-center align-items-center">
                <div class="input-group mb-3">
                  <input type="text" class="form-control" placeholder="Termékek keresése..." aria-label="Recipient's username" aria-describedby="basic-addon2">
                  <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button">Keresés</button>
                  </div>
                </div>
            </div>
            <div class="col-md-4 d-flex justify-content-center justify-content-md-end align-items-center">
                <a href="#" title="" class=""><b>Kosár</b></a>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

我附上一张标头现在的样子的照片。标头的底部带有灰色边框。

Answer 1

简单添加到您的flex容器中

.row{
align-items: center;
}

最好找到更具体的类（例如添加类名center和目标.row.center）

Answer 2

align-items：center; 不足以垂直居中，因为您没有定义高度。换句话说，如果要使其垂直居中，则必须将页眉高度定义为页面的100％。参见下面的示例：

	body{
		height: 100vh;
	}

	.header{
		height:100%;
	}

	.container{
		height: 100%;
	}

	.row{
		height: 100%;
		display:flex;
		align-items: center;
	}

<div class="header">
    <div class="container">
        <div class="row">
            <div class="col-md-4 d-flex justify-content-center justify-content-md-start align-items-center">
                <a href="#" title="" class=""><img src="images/assets/logo.png" alt="" class="img-fluid"</a></a>
            </div>
            <div class="col-md-4 d-flex justify-content-center justify-content-md-center align-items-center">
                <div class="input-group mb-3">
                  <input type="text" class="form-control" placeholder="Termékek keresése..." aria-label="Recipient's username" aria-describedby="basic-addon2">
                  <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button">Keresés</button>
                  </div>
                </div>
            </div>
            <div class="col-md-4 d-flex justify-content-center justify-content-md-end align-items-center">
                <a href="#" title="" class=""><b>Kosár</b></a>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

Answer 3

您的代码是正确的，问题在于行高基于最高的子元素（例如徽标div），因此您需要设置行高，元素将对齐。 Codepen

.header .container .row { 
  height : 200px;
  background-color : grey;
}

如何使用flex在标题中垂直居中对齐元素

3 个答案: