align with inline elements

 

This question already has an answer here:

  • Vertical align not working on inline-block 3 answers
  • How do I vertically center text with CSS? 34 answers

    • vertical-align aligns the inline elements with each other, it doesn't position them within their container.

    So if for example you have a taller vertical-align: middle inline element in the same div , the "Hello" will be centred relative to it: 

    div {
  height: 300px;
  width: 300px;
  background-color: aqua;
  margin-bottom: 10px;
}
div > span {
  vertical-align: middle;
  background-color: orange;
  font-size: 3em;
}
.big {
  font-size:200px;
}
    <div>
  <span>Hello!</span>
  <span class="big">B</span>
</div>

    https://jsfiddle.net/x0gc91ch/1/

    add line-height: 300px

    to the div css, because you are trying to align to the middle of the default line-height, which isn't as tall as your parent div.

    链接地址: http://www.djcxy.com/p/41662.html

    上一篇: 我试图垂直和水平居中文本在一个div上

    下一篇: 与内联元素对齐