html图片与文本对齐跟小程序图片与文本对齐

最新推荐文章于 2024-08-11 22:23:08 发布

子义间

最新推荐文章于 2024-08-11 22:23:08 发布

阅读量2.2w

点赞数

分类专栏： html 小程序

本文链接：https://blog.csdn.net/D_Z_Yong/article/details/99726358

版权

html 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

小程序

6 篇文章 0 订阅

订阅专栏

html实现图片跟文本的对齐

<!DOCTYPE html>
<html>
<head>
<style>
   .a * {
 	  display:inline-block;
	  vertical-align:middle;  
   }
</style>
<script>

</script>

</head>
<body>
<div class="a">
	<img src="./1.png"/>
	<span>我就是文本，看对齐了吧</span>
</div>
</body>
</html>

实例
在这里插入图片描述

小程序实现图片跟文本的对齐

wxss

.a{
    width: 100%;
    height: 100rpx;
    background: red;
	display: flex;
    align-items: center; 
    }
.author_img{
   width: 100rpx;
   height: 100rpx;
   border-radius: 50%;
   margin-left: 80rpx;
}

wxml

<view class="author">
    <view class="author_img">
      <image src="../../images/4.jpg" style="border-radius: 50%;"></image>
    </view>
    <view class="author_title">{{name}}</view>
</view>