html – 垂直对齐方法

发布时间：2020-12-14 23:41:26 所属栏目：资源来源：网络整理

导读：垂直对齐某些东西相对于它的元素尺寸的最佳方法是什么.截至目前,我只知道vertical-align：middle;在 tr内工作良好. 是否还有其他方法可以帮助我们在程序上实现这一目标？解决方法以下是3种非常好的技术,用于将容器中的子项垂直居中 – 即使您不知道子元素

垂直对齐某些东西相对于它的元素尺寸的最佳方法是什么.截至目前,我只知道vertical-align：middle;在< tr>内工作良好.

是否还有其他方法可以帮助我们在程序上实现这一目标？

解决方法

以下是3种非常好的技术,用于将容器中的子项垂直居中 – 即使您不知道子元素的高度.前2个来自 this CSS-tricks article

标记(适用于所有方法)：

<div class="block">    
    <div class="centered">
        Some text
    </div>    
</div>

解决方案#1：CSS表方法(FIDDLE)

CSS：

/* This parent can be any width and height */
.block {
  display: table;
   width: 100%;
   background: orange;
   height: 300px;
}


.centered {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
   background: pink;
}

解决方案#2：伪(‘Ghost’)元素方法(FIDDLE)

CSS：

/* This parent can be any width and height */
.block {
  text-align: center;
  background: orange;
  height: 300px;

}

/* The ghost,nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered,can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
    background: pink;
}

解决方案#3：Flexbox(FIDDLE)

(相关)CSS：

.block {
   background: orange;
   height: 300px;
   display: flex;
   align-items: center;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!