JSFiddle - React, Tailwind, and code Playground
HTML
<div class="center_div">
<img src="http://3wa.tw/3wa.png" width="80">
所以我說那個醬汁呢所以我說那個醬汁呢所以我說那個醬汁呢所以我說那個醬汁呢所以我說那個醬汁呢所以我說那個醬汁呢
</div>
JavaScript
;(function() {
var _docenter=function(dom){
dom.css({
'display':'inline-block'
});
var img_w=parseInt(dom.find("img").first().css('width'));
var dom_w=parseInt(dom.css('width'));
dom.centerX();
var dom_left=parseInt(dom.css('left'));
dom.css({
left:(dom_left+(dom_w-img_w)/2)+'px'
});
}
$.fn.centerX = function () {
this.css("position","absolute");
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
return this;
}
$.centerimage = function(dom) {
dom.find("img").load(function(event){
event.data._docenter(event.data.dom);
});
_docenter(dom);
};
})();
//使用方法
$(document).ready(function(){
var dom = $(".center_div");
$.centerimage(dom);
});