How to vertically center a inside a div? [duplicate]

Answer 1

Quick answer for single line span

Make the child (in this case a span) the same line-height as the parent

's height

  Yes mom, I did my homework lol

You should then add the CSS rules

.parent { height: 20px; }
.child { line-height: 20px; vertical-align: middle; }

---

Or you can target it with a child selector

.parent { height: 20px; }
.parent > span { line-height: 20px; vertical-align: middle; }

Background on my own use of this

I ran into this similar issue where I needed to vertically center items in a mobile menu. I made the div and spans inside the same line height. Note that this is for a meteor project and therefore not using inline css ;)

HTML

        
  
    {{flag}}        
  

  
    {{country}}
  

  
    
   

CSS (option for multiple spans in a div)

.international {
  height: 42px;
}

.international > span {
  line-height: 42px;
}

In this case if I just had one span I could have added the CSS rule directly to that span.

CSS (option for one specific span)

.intlFlag { line-height: 42px; }

Here is how it displayed for me

0 讨论(0)

查看其它5个回答

发布评论:

提交评论

---

•  加载中...