<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <label>姓名</label><textarea style="height: 200px; vertical-align: middle;"></textarea> <label>学历</label> </body> </html>
vertical-align: middle; 可以让【同】行内的行内元素或文字垂直居中对齐,inline-block也可以。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <label>姓名</label><textarea style="height: 200px; vertical-align: middle;"></textarea> <label>学历</label> <label>学历</label> <br> <span style="height: 80px; background-color: red; display: block; line-height: 80px;">这是一行测试</span> </body> </html>
line-height = height 是对块元素内文字的水平居中对齐的方法。
块元素水平居中:1、设置宽度 2、margin: auto
行内元素或行内块元素设置父的 text-align: center;