height and dynamic height of div

This question already has an answer here:

Vertically centering a div inside another div 23 answers

---

You put another inline-level element on the same line with a height equal to 100% of the container. It's most common to use display:inline-block; here, but any inline-level element to which height applies, such as inline-table , inline-flex or a replaced inline element will work just as well.

eg div:before { content:''; display:inline-block; height:100%; vertical-align:middle; }

html, body { height: 900px; }

div { border:1px solid black; height: 12%; }

div:before { content:''; display:inline-block; height:100%; vertical-align:middle; }

<div>
<i>My text</i>
</div>

---

The intuitive way would be to set the line-height to 100% , but that actually just sets the line height to 100% size of the font

Assuming you probably want to center your text, try this

.container {
     position:relative;
}
.center {
     position:absolute;
     top:0; left:0; bottom:0; right:0;
     margin: auto;
     /* for horiz left-align, try "margin: auto auto auto 0" */
}

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

上一篇: 在中间垂直对齐div

下一篇: div的高度和动态高度