如何将小部件对齐到屏幕中心

Question

我正在尝试在我的网页中对齐此小部件。

小工具代码-

<html><head><link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine"><script>var getJSON = function(url) {return new Promise(function(resolve, reject) {var xhr = new XMLHttpRequest();xhr.open("get", url, true);xhr.responseType = "json";xhr.onload = function() {var status = xhr.status;if (status == 200) {resolve(xhr.response);}else{reject(status);}};xhr.send();});};getJSON("https://www.wedmegood.com/api/v1/vendor/review_widget_detail?version=1.1&vendor_id=19098").then(function(data){document.getElementById("profile-name").innerHTML = data.data.vendor_name;if(data.data.reviews_count == 1)document.getElementById("review-count").innerHTML = data.data.reviews_count + " Review";else
document.getElementById("review-count").innerHTML = data.data.reviews_count + " Reviews";var res = data.data.profile_pic_url.replace("%%", "270");document.getElementById("img-rep").src = res;}, function(status) {});</script><style>p{font-family:proxima-nova;font-style: bold;}.img-circle{border-radius:50%;position:absolute;z-index: 1;height:70px;width:70px;left:20px;top:18px;}.box{position:relative;box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2);height:150px;width:300px;}</style></head><body><a href="https://www.wedmegood.com/profile/Wedding-Moments-115322" target="_newtab"><div class="box"><img id="img-rep" class="img-circle" src=""><p id="profile-name" style = "color:#e72e77;position:absolute;left:110px;font-size:18px;"></p><p id="review-count" style = "color:white;position:absolute;left:208px;top:48px;font-size:15px;"></p><img src="https://images.wedmegood.com/images/widget.jpg"><p style="position:absolute;font-size:14px;top:152px;left:67px;">View My Profile on WedMegood</p></div></a></body></html>

但是当我把它放在我的网页上时，我无法将它对齐到中心。它应该与 View More 和 Awards 处于相同的垂直位置。看这张图——

我将小部件代码放在 html 元素中。一共有三列，我将小部件放在中间 -

但是小部件并不完全位于中心。你能告诉我如何解决这个问题吗？

非常感谢....

Answer 1

将您的小部件放入包装器中 div。添加一个 class 到那个 div 。例如。 .wrapper 将 wrapper 宽度设置为 100% 并设置 justify-content:center

<div class="wrapper">
//widget code here
</div>

css

.wrapper{
display:flex;
justify-content:center;
width:100%
}

如何将小部件对齐到屏幕中心

How to align the widget to the center of the screen

html

css

widget