图片与文字对齐

最新推荐文章于 2023-02-21 13:51:51 发布

端脑

最新推荐文章于 2023-02-21 13:51:51 发布

阅读量250

点赞数

分类专栏：前端文章标签：图片与文字对齐

本文链接：https://blog.csdn.net/qq_43776742/article/details/103377517

版权

前端专栏收录该内容

90 篇文章 2 订阅

订阅专栏

图片与文字对齐

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

<!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; */ /*默认基线对齐*/
           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>

返回目录

端脑

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
图片与文字对齐

图片与文字对齐text-align: center 文字水平对齐margin: 0 auto 对有宽度的块级盒子水平居中vertical-align 控制元素垂直对齐方式对块级元素无效对行内元素或者行内块元素有效通常用来控制图片...
复制链接

扫一扫