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;
}

結果：