我正在嘗試在我的網頁中對齊此小部件。
小部件代碼 -
<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 元素中。共有三列，我將小部件放在中間 -
但是小部件并不完全位于中心。你能告訴我如何解決這個問題嗎？
提前謝謝了 ....
uj5u.com熱心網友回復：
將您的小部件放入包裝器 div 中。向該 div 添加一個類。例如。.wrapper
使包裝寬度為 100% 并設定justify-content:center
<div class="wrapper">
//widget code here
</div>
css
.wrapper{
display:flex;
justify-content:center;
width:100%
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/476397.html
下一篇：像單個輸入一樣組合兩個輸入標簽