垂直对齐在bootstrap 4中不起作用。

问题描述 投票：0回答：1

我试图将一些图片在它们的div中居中，但不知何故，垂直对齐并不奏效。在这段代码中 d-flex justify-content-end 和 text-center 也没有用，但图标应该是相邻的。我想让图标在div的中心位置，我用了 align-items-center 来实现这个效果，但图标却停留在div的顶部中心。 我是不是错过了什么？我是不是错过了什么？在getbootstrap上，它只说要和d-flex一起使用，我是这么做的。 

/*    .navicons {
   	float: right !important
} */

.iconwrap {
	width: 100%;
    min-heigh: 35px;
/*  position: relative; */
}

.navicons1, .navicons2, .navicons3 {
	width: 35px;
	height: 35px;
	background: #7dc623;
	opacity: 1;
	position: relative;
/*  align-items: center; */
	top: 0;
	left: 0;
	z-index: 10;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

.naviconshov1, .naviconshov2, .naviconshov3 {
	width: 35px;
	height: 35px;
	background: #ffffff;
	opacity: 1;
	position: absolute;
/*	align-items: center; */
	top: 0;
	left: 0;
	z-index: 10;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

.navicons1:hover .naviconshov1 {
	opacity: 0;
}

.navicons2:hover .naviconshov2 {
	opacity: 0;
}

.navicons3:hover .naviconshov3 {
	opacity: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" >
<div class="row">
					<div class="col-md-9">
          </div>
          <div class="col-md-3 navicons">
						<div class="text-center iconwrap d-flex justify-content-end">
							<div class="d-inline-block navicons1 d-flex align-items-center">
								<div class="naviconshov1"><img src="https://i.imgur.com/FMb2eun.gif" alt="account"/></div>
								  <a href="index.html"><img src="https://i.imgur.com/6w5w1r8.gif" alt="account"/></a>
							</div>
							<div class="d-inline-block navicons2 d-flex align-items-center">
								<div class="naviconshov2"><img src="https://i.imgur.com/QGZVEQl.gif" alt="favorieten"/></div>
									<a href="index.html"><img src="https://i.imgur.com/1eY8XZN.gif" alt="favorieten"/></a>
							</div>
							<div class="d-inline-block navicons3 d-flex align-items-center">
								<div class="naviconshov3"><img src="https://i.imgur.com/ueXdZR8.gif" alt="winkelmandje"/></div>
									<a href="index.html"><img src="https://i.imgur.com/DZxP59y.gif" alt="winkelmandje"/></a>
							</div>
						 </div>								
					</div>
         </div>

编辑：我也试过用下面的代码，但同样的效果，它停留在左上角。

.navicons {
	float: right !important;
}
.iconwrap {
	width: 100%;
	min-height: 35px;
	vertical-align: middle;
}

.navicons1, .navicons2, .navicons3 {
	width: 35px;
	height: 35px;
	background: #7dc623;
	opacity: 1;
	position: relative;
	align-items: center; 
	top: 0;
	left: 0;
	z-index: 10;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

.naviconshov1, .naviconshov2, .naviconshov3 {
	width: 35px;
	height: 35px;
	background: #ffffff;
	opacity: 1;
	position: absolute;
	align-items: center;
	top: 0;
	left: 0;
	z-index: 10;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

.navicons1:hover .naviconshov1 {
	opacity: 0;
}

.navicons2:hover .naviconshov2 {
	opacity: 0;
}

.navicons3:hover .naviconshov3 {
	opacity: 0;
}
<div class="row">
		<div class="col-md-9">
    </div>
    <div class="col-md-3 navicons">
		    <div class="d-flex align-items-center iconwrap">
						<div class="d-inline-block float-right navicons1">
							<div class="naviconshov1"><img src="https://i.imgur.com/FMb2eun.gif" alt="account"/></div>
								  <a href="index.html"><img src="https://i.imgur.com/6w5w1r8.gif" alt="account"/></a>
							</div>
							<div class="d-inline-block float-right navicons2">
								<div class="naviconshov2"><img src="https://i.imgur.com/QGZVEQl.gif" alt="favorieten"/></div>
									<a href="index.html"><img src="https://i.imgur.com/1eY8XZN.gif" alt="favorieten"/></a>
							</div>
							<div class="d-inline-block float-right navicons3">
								<div class="naviconshov3"><img src="https://i.imgur.com/ueXdZR8.gif" alt="winkelmandje"/></div>
									<a href="index.html"><img src="https://i.imgur.com/DZxP59y.gif" alt="winkelmandje"/></a>
							</div>
				</div>								
		</div>
 </div>
html css bootstrap-4
1个回答
1
投票

添加 

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

到div类的naviconshov1，naviconshov2等。

<div class="naviconshov1">

0
投票

不知道这是不是你想要的。图标的中心是通过使用 justify-content-center 和 align-items-center.

/*    .navicons {
   	float: right !important
} */

.iconwrap {
  width: 100%;
  min-heigh: 35px;
  /*  position: relative; */
}

.navicons1,
.navicons2,
.navicons3 {
  width: 35px;
  height: 35px;
  background: #7dc623;
  opacity: 1;
  position: relative;
  /*  align-items: center; */
  /*top: 0;*/
  left: 0;
  z-index: 10;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.naviconshov1,
.naviconshov2,
.naviconshov3 {
  width: 35px;
  height: 35px;
  background: #ffffff;
  opacity: 1;
  position: absolute;
  /*	align-items: center; */
  /*top: 0;*/
  left: 0;
  z-index: 10;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.navicons1:hover .naviconshov1 {
  opacity: 0;
}

.navicons2:hover .naviconshov2 {
  opacity: 0;
}

.navicons3:hover .naviconshov3 {
  opacity: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
  <div class="col-md-9">
  </div>
  <div class="col-md-3 navicons">
    <div class="text-center iconwrap d-flex justify-content-center">
      <div class="d-inline-block navicons1 d-flex justify-content-center  align-items-center">
        <div class="naviconshov1 d-flex justify-content-center align-items-center"><img src="https://i.imgur.com/FMb2eun.gif" alt="account" /></div>
        <a href="index.html"><img class="d-flex justify-content-center align-items-center" src="https://i.imgur.com/6w5w1r8.gif" alt="account" /></a>
      </div>
      <div class="d-inline-block navicons2 d-flex justify-content-center align-items-center">
        <div class="naviconshov2 d-flex justify-content-center  align-items-center"><img src="https://i.imgur.com/QGZVEQl.gif" alt="favorieten" /></div>
        <a href="index.html"><img class="d-flex justify-content-center align-items-center" src="https://i.imgur.com/1eY8XZN.gif" alt="favorieten" /></a>
      </div>
      <div class="d-inline-block navicons3 d-flex justify-content-center align-items-center">
        <div class="naviconshov3 d-flex justify-content-center align-items-center"><img  src="https://i.imgur.com/ueXdZR8.gif" alt="winkelmandje" /></div>
        <a href="index.html"><img class="d-flex justify-content-center align-items-center" src="https://i.imgur.com/DZxP59y.gif" alt="winkelmandje" /></a>
      </div>
    </div>
  </div>
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.