css图片和文字在父元素垂直居中,且在中线对齐排列的几种方式

2021-01-1708:12:52网页制作Comments2,322 views字数 1897阅读模式

一,用flex的副轴来垂直居中对齐文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20839.html

1.副轴(由上到下)设置居中对齐(align-items: center;)即可文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20839.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 
 7     <style>
 8     
 9     .a{
10         width: 200px;
11         height: 200px;
12         background-color: #bfa;
13         /*行高,使文字在父元素中垂直居中*/
14         /*line-height: 200px;*/
15         
16         display: flex;
17         /*justify-content: center;*/
18         /*副轴对齐方式*/
19         align-items: center;
20     }
21 
22     img{
23         /*margin-bottom: -16px;*/
24         /*和文字中线对齐*/
25         /*vertical-align: middle;*/
26         width: 20%;
27         height: 20%;
28 
29     }
30 
31     </style>
32 </head>
33 <body>
34     <div class="a">
35 
36         <img src="img/11.jpg" alt="">
37     <span>nioifhiughi</span>
38     
39     </div>
40 </body>
41 </html>

效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20839.html

css图片和文字在父元素垂直居中,且在中线对齐排列的几种方式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20839.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20839.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20839.html

二,利用vertical-align: middle ;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20839.html

1.父元素设置行高,使文字垂直居中对齐,然后对图片设置vertical-align: middle ;使图片和文字的中线对齐文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20839.html

2.图片没设置vertical-align: middle ,图片和文字的中线不齐。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20839.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 
 7     <style>
 8     
 9     .a{
10         width: 200px;
11         height: 200px;
12         background-color: #bfa;
13         /*行高,使文字在父元素中垂直居中*/
14         line-height: 200px;
15         
16         /*display: flex;*/
17         /*justify-content: center;*/
18         /*副轴对齐方式*/
19         /*align-items: center;*/
20     }
21 
22     img{
23         /*margin-bottom: -16px;*/
24         /*和文字中线对齐*/
25         vertical-align: middle;
26         width: 20%;
27         height: 20%;
28 
29     }
30 
31     </style>
32 </head>
33 <body>
34     <div class="a">
35 
36         <img src="img/11.jpg" alt="">
37     <span>nioifhiughi</span>
38     
39     </div>
40 </body>
41 </html>

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20839.html

三,对图片设置margin-bottom,注意值时要负数。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20839.html

1.对图片未设置margin-bottom,时,图片和文字的中线不齐的,此时设置margin-bottom为 负数,图片为慢慢往下移动,当图片和文字的中线对齐时就OK了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20839.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 
 7     <style>
 8     
 9     .a{
10         width: 200px;
11         height: 200px;
12         background-color: #bfa;
13         /*行高,使文字在父元素中垂直居中*/
14         line-height: 200px;
15         
16         /*display: flex;*/
17         /*justify-content: center;*/
18         /*副轴对齐方式*/
19         /*align-items: center;*/
20     }
21 
22     img{
23         margin-bottom: -16px;
24         /*和文字中线对齐*/
25         /*vertical-align: middle;*/
26         width: 20%;
27         height: 20%;
28 
29     }
30 
31     </style>
32 </head>
33 <body>
34     <div class="a">
35 
36         <img src="img/11.jpg" alt="">
37     <span>nioifhiughi</span>
38     
39     </div>
40 </body>
41 </html>

不齐效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20839.html

css图片和文字在父元素垂直居中,且在中线对齐排列的几种方式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20839.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20839.html

一起齐的效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20839.html

css图片和文字在父元素垂直居中,且在中线对齐排列的几种方式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20839.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20839.html

以上就是css,图片和文字在父元素垂直居中,且图片和文字在中线对齐排列的几种方式的全部内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20839.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/zhizuo/20839.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定