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

前端未结

关注

 5  702

暖寄归人

相关标签:

5条回答

旧时难觅i

2020-11-27 10:18

See my article on understanding vertical alignment. There are multiple techniques to accomplish what you want at the end of the discussion.

(Super-short summary: either set the line-height of the child equal to the height of the container, or set positioning on the container and absolutely position the child at top:50% with margin-top:-YYYpx, YYY being half the known height of the child.)

0 讨论(0)
发布评论:

提交评论
- 加载中...
鱼传尺愫

2020-11-27 10:20
At your parent DIV add
```
display:table;
```
and at your child element add
```
 display:table-cell;
 vertical-align:middle;
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
别跟我提以往

2020-11-27 10:23

To the parent div add a height say 50px. In the child span, add the line-height: 50px; Now the text in the span will be vertically center. This worked for me.

0 讨论(0)
发布评论:

提交评论
- 加载中...
后悔当初

2020-11-27 10:30
As in a similar question, use display: inline-block with a placeholder element to vertically center the span inside of a block element:
```
html, body, #container, #placeholder { height: 100%; }

#content, #placeholder { display:inline-block; vertical-align: middle; }
```
```
<!doctype html>
<html lang="en">
  <head>
  </head>

  <body>
    <div id="container">
      <span id="content">
        Content
      </span>
      <span id="placeholder"></span>
    </div>
  </body>
</html>
```
Vertical alignment is only applied to inline elements or table cells, so use it along with display:inline-block or display:table-cell with a display:table parent when vertically centering block elements.

References:

CSS Horizontal and Vertical Centering
0 讨论(0)
发布评论:

提交评论
- 加载中...
清歌不尽

2020-11-27 10:33
Quick answer for single line span

Make the child (in this case a span) the same line-height as the parent <div>'s height
```
<div class="parent">
  <span class="child">Yes mom, I did my homework lol</span>
</div>
```
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
```
<div class="international">        
  <span class="intlFlag">
    {{flag}}        
  </span>

  <span class="intlCurrent">
    {{country}}
  </span>

  <span class="intlButton">
    <i class="fa fa-globe"></i>
  </span> 
</div>
```
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)
发布评论:

提交评论
- 加载中...

热议问题