CSS text-align图片文字内容居左 居右 居中

1、text-align的值与说明

text-align语法：
text-align : left | right | center | justify 

text-align参数值与说明： 
left : 左对齐
right : 右对齐
center : 居中
*justify : 两端对齐（不推荐使用，通常大部分浏览器不使用）
我们对text-align常用的参数值为left、right、center

 

二、text-align常使用地方  

text-align常常用于盒子里的文字、图片等内容居左、居中、局右。比较常见是常规的让内容局左或居中对齐排列。

text-align举例截图

三：实例

我们用小程序的控件进行演示

<view class="view_left">
  <image src="../image/type.png"></image>
  <text>你是傻子吗</text>
</view>
<view class="view_center">我被居中了</view>
<view class="view_right">我被居右了</view>

css样式

.view_center {
  width: 300px;
  height: 100px;
  text-align: center;
  border: 1px solid #0f0;
}

.view_left {
  width: 300px;
  height: 100px;
  text-align: left;
  margin-top: 10px;
  border: 1px solid #0f0;
}

.view_right {
  width: 300px;
  height: 100px;
  text-align: right;
  margin-top: 10px;
  border: 1px solid #0f0;
}

.view_left image {
  width: 30px;
  height: 30px;
}

结果：