css原生的就支持图片或者文字两端对齐。两端对齐，在css布局中是很常见的。两端对齐，是子元素水平的，均匀的分布在父元素内 。css中使用两端对齐，使用的是 text-align-last:justify 。 之前没怎么使用过两端对齐，之前一直用浮动或者inline-block加宽度来模拟两端对齐， 这里记录一下如何使用text-align-last:justify实现两端对齐。
首先需要理解 text-align 控制的是，子元素的对齐方式，并且子元素不能是块元素。text-align的值是justify的时候， 对最后一行是没有效果的。 而 text-align-last 就是针对最后一行。所以就可以用justify。至于为什么 text-align对最后一行没有效果，想想这样的行为是挺合理的。因为文字两端对齐的时候，最后一行，只有几个文字的时候，最后一行的文字的间距就太大了，不好看。当然这是我猜测的。
css文字两端对齐的示例
css 代码
.father {
display: block;
outline: 1px solid red;
text-align-last: justify;
}
.son {
display: inline;
outline: 1px solid blue;
}
html 代码
1
2
3
显示的效果
三个子元素始终两端对齐
css图片两端对齐的示例
css
.father {
display: block;
outline: 1px solid red;
text-align-last: justify;
overflow: hidden;
}
.son {
display: inline;
outline: 1px solid blue;
}
img {
vertical-align: bottom;
}
html
显示的效果
css图片两端对齐
需要注意得 vertical-align: bottom 可以防止出现一个透明的底空白。
css图片两端对齐 图片底部有透明的空白

CSS设置图片的对齐
横向对齐方式
图片的水平对齐方式和文字的水平对齐方式基本相同，分别是左、中、右三种方式，不同的是，图片的水平对齐通常不能直接通过设置图片的text-align属性设置，而是，通过设置其父元素的该属性来实现的。
水平对齐
代码如上，可以看到三种图片分别在表格中以左、中、右的方式对齐，如果，直接在图片上面设置水平对齐方式，则达不到想要的效果。
纵向对齐方式
图片竖直方向上的对齐方式，主要体现在与文字搭配的情况下，尤其当图片的高度和文字本身不一致时，在CSS中同样通过vertical-align属性来实现。
属性vertical-align的值有很多，注意，某些属性值在IE和Firefox中显示时是略有区别的。
竖直对齐
竖直对齐方式：baseline方式
竖直对齐方式：bottom方式
竖直对齐方式：middle方式
竖直对齐方式：sub方式
竖直对齐方式：super方式
竖直对齐方式：text-bottom方式
竖直对齐方式：text-top方式
竖直对齐方式：top方式
代码如上，当vertical-align属性的值为Baseline时，两幅图片的下端都落在文字的基线上，如果给文字添加了下划线，那就是下划线的位置，对于其他的值，都能从显示结果和值本身的名称直观的看到结果。
当vertical-align的值为bottom或者sub时，可以看出IE和Firefox中显示的结果不一样，因此，这样的属性值不建议使用和文字的竖直对齐方式一样，图片的竖直对齐方式也可以用具体的数值来调整，正数和负数都可以使用。
竖直对齐，具体数值
竖直对齐方式：5px
竖直对齐方式：-10px
代码如上，类比文字的竖直对齐方式，图片的竖直对齐方式的效果基本相同，而且，无论图片本身的高度是多少。

官网下载地址


http://ueditor.baidu.com/website/download.html


项目一直在用ueditor富文本编辑器，一直是对编辑器的图片、音频、视频的及地图进行配置，使编辑器正常使用，没有认真使用过编辑器就行文章编辑，今天编辑部突然说编辑器有问题，发现 图片选择左对齐或右对齐，保存以后并没有左右对齐，仍是居中状态， 查看源码以后发现是配置问题。

解决办法：

找到ueditor的配置文件ueditor.config.js，里面搜索 whitList 然后在下面找到img，在 [ ] 里面添加 'style'。


原配置 ：

img:['src','alt','title','width','height','id','_src','loadingclass','class','data-latex']

添加后如下：

img:['src','alt','title','width','height','id','_src','loadingclass','class','data-latex','style' ] 

1、小程序view-image居中

<view style="height:200rpx;overflow:hidden;border:1rpx solid #ccc;position:relative;">
  <image class="images" mode="widthFix" src="{{item.imagessrc}}" style="width:100%;height:100%;transform:translate(-50%, -50%);position:absolute;top:50%;left:50%;" role="img"></image>
</view>

 



小程序还有一个本身更加方法的属性和样式设置，如下

style="width:100%;height:100%;"

mode="aspectFit"

<view style="width:100%;height:100%;color:#888;border:2px dashed pink;position:relative;" >
      <text style="position:absolute;top:50%;left:50%;width:100rpx;height:100rpx;line-heigth:100rpx;margin-left:-50rpx;margin-top:-50rpx;text-align:center;">+</text>
      <image src="{{imageList[0].path}}" style="width:100%;height:100%;" mode="aspectFit"></image>
    </view>

小程序另一个自适应显示图片

 <image bindtap="" bindload="imageLoad" src="{{path}}" data-src="{{path}}" style="width:100% !important;height:100% !important;opacity:{{opacity}};" model="aspectFit"></image>

 

2、HTML div-image居中

<div style="height:0;width:100%;padding:50% 0;background:#fff;position:relative;">
  <img style="transform: translate(-50%, -50%);position:absolute;top:50%;left:50%;width: auto !important;height: auto !important;max-height: 100%;max-width: 100%;" data-src="https://b2c.jihainet.com/static/uploads/8c/f8/53/5bc9a3b2916a4.jpg" src="https://b2c.jihainet.com/static/uploads/8c/f8/53/5bc9a3b2916a4.jpg" lazy="loaded">
</div>