图片与文字对齐

图片与文字对齐

  • text-align: center 文字水平对齐
  • margin: 0 auto 对有宽度的块级盒子水平居中
  • vertical-align 控制元素垂直对齐方式 对块级元素无效 对行内元素或者行内块元素有效 通常用来控制图片
    • 取值 baseline | top | middle | bottom

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<style type="text/css">
	   div {
      
	   		width: 200px;
	   		height: 200px;
	   		background-color: pink;
	   		vertical-align: middle;
	   }

	   img {
      
           /* vertical-align: baseline; */ /*默认基线对齐*/
           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>

返回目录

你可能感兴趣的:(前端,图片与文字对齐)