码迷,mamicode.com
首页 > 其他好文 > 详细

inline-block元素垂直对齐

时间:2017-10-27 13:20:32      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:line   span   middle   垂直   length   other   多个   eth   添加   

多个inline-block元素使用vertical-align:middle无法对齐,必须有个height:100%的子元素才行,通常使用伪元素。
另一种方法是添加line-height:normal,也能实现多个inline-block元素的对齐或inline-block容器内文本的垂直居中。

例如:

<h3>Vertical-align of multiple elements by default not possible</h3>
<div class="block">
  <div class="inner inner1">Inline-Block</div>
  <div class="inner inner2">Inline-Block</div>
</div>


<h3>With an added pseudo element it‘s possible</h3>
<div class="block2">
  <div class="inner">Inline-Block</div>
  <div class="inner">Inline-Block</div>
</div>


<h3>It also works with just an added line-height and nothing else</h3>
<div class="block3">
  <div class="inner inner3">Inline-Block with some lengthy text to show that it also works with multiple lines.</div>
  <div class="inner inner3">Inline-Block.</div>
</div>

<h3>Button with vertically centered mult-line text</h3>
<div class="block4">
  <div class="inner inner4">Inline-Block with centered text.</div>
</div>
/* By default vertical-align ist not possible, only different elements can be vertically aligned among eachother */
.block {
  background: red;
  height: 100px;
}

.inner {
  display: inline-block;
  vertical-align: middle;
  background: yellow;
  padding: 3px 5px;
}

.inner1 {
  height: 30px;
}

.inner2 {
  height: 20px;
}

/* With an added fake (pseudo) element it works. IMPORTANT: There must be no spaces between the elements in the source, else it doesn‘t work! */
.block2 {
  background: orange;
  height: 80px;
}

/* Fake (pseudo) element, that enables vertical-align */
.block2:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

/* Also works if you set line-height instead of the height (or together with the same value as the height). No pseudo-element needed.  */
.block3 {
  background: green;
  /*height: 120px;*/
  line-height: 120px;
}

.inner3 {
  width: 30%;
  line-height: normal; /* Reset line-height for the child. IMPORTANT: Must be "normal", no integer value allowed! */
}

.block4 {
  background: magenta;
  line-height: 60px;
}

.inner4 {
  line-height: normal; /* Reset line-height for the child. */
  background: none;
}

/* Miscellaneous styling */
@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700);

h3, div {
  font-family: ‘PT Sans‘, sans-serif;
}

.block, .block2, .block3 {
  border: 5px dotted rgba(0,0,0,.4); 
  background-clip: padding-box;
  width: 50%;
}

.block4 {
  text-align: center;
  width: 20%;
  box-shadow: 3px 3px 0 black;
}

h3 {
  margin: 40px 0 7px;
}

 

出处: https://codepen.io/edge0703/pen/iHJuA

inline-block元素垂直对齐

标签:line   span   middle   垂直   length   other   多个   eth   添加   

原文地址:http://www.cnblogs.com/mengff/p/7742308.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!