图片与文字对齐
text-align: center 文字水平对齐
margin: 0 auto 对有宽度的块级盒子水平居中
vertical-align 控制元素垂直对齐方式 对块级元素无效 对行内元素或者行内块元素有效 通常用来控制图片
取值 baseline | top | middle | bottom
01图片与文字对齐.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 200px; height: 200px; background-color: pink; vertical-align: middle; } img { /* vertical-align: baseline; */ /*默认基线对齐,有top*/ vertical-align: middle; } textarea { width: 300px; height: 300px; vertical-align: middle; } </style> </head> <body> <div>文字</div> <img src="img/2.jpg" alt="">尴尬的我啊 <hr> 个人简介<textarea name="" id="" cols="30" rows="10"></textarea> </body> </html>
