Home >Web Front-end >HTML Tutorial >help!please(How to vertically center text?)_html/css_WEB-ITnose
help!please(How to vertically center text?)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:14:361152browse
[img=file:///C:/Users/Bai/Desktop/mklmActivity 2/L3lianxi.html][/img]
Reply to discussion (solution)
[img=QQ screenshot 20120905150308][/img]
[img=http://QQ screenshot 20120905150308][/img]
Failed to see the sticker. Good vertical centering of text is actually two layers. The width of the text in the inner layer is infinitely close to the width of a single byte. But if you don’t understand, you can send me a private message
A small icon is placed in front of the text in li. The height is the same as the height of li. The text is 14px. Then I made it by myself so that the text is close to the bottom. I want it to be vertically centered, how should I do it?
The height should be the same as the row height. height and line-height have the same value
Okay, I’ve sent you a private message!
.s1 li{ width:600px; height:25px; line-height:25px;font:400 14px/20px "微软雅黑";}.s1 li label{ width:64px; height:25px; background:url(%E6%9C%AA%E6%A0%87%E9%A2%98-1.gif)no-repeat -32px -31px; display:inline-block}.s1{ margin:20px 0 0 20px;}</style></head><body> <ul class="s1"> <li style=" background:#FF0099"><label></label>人家les/g/dz;/zdfgdxzg'k东旭早光芒了</li> <li><label></label>人家les/g/dz;/zdfgdxzg'k东旭早光芒了</li> <li><label></label>人家les/g/dz;/zdfgdxzg'k东旭早光芒了</li> <li><label></label>人家les/g/dz;/zdfgdxzg'k东旭早光芒了</li> <li><label></label>人家les/g/dz;/zdfgdxzg'k东旭早光芒了</li> <li><label></label>人家les/g/dz;/zdfgdxzg'k东旭早光芒了</li> </ul> My height and line height are the same as if
I’ll send you a private message. If it’s solved, I’ll post it. If it’s not solved, keep sending me a private message