Как выровнять виджет по центру экрана

Я пытаюсь выровнять этот виджет на своей веб-странице.

widget

Код виджета -

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

Но когда я помещаю его на свою веб-страницу, я не могу выровнять его по центру. Он должен находиться в том же вертикальном положении, что и Посмотреть больше и Награды. Смотрите эту картинку - off-center

Я помещаю код виджета в элемент html. Есть три столбца, и я помещаю виджет посередине - design element

Но виджет не совсем по центру. Не могли бы вы рассказать мне, как решить эту проблему?

Спасибо заранее ....

Привет! Можете ли вы сказать мне, что вы пробовали

Castle 17.05.2022 09:44

Привет, спасибо за ответ. Я изменил все позиции с относительной/абсолютной на центральную. Игрался с ними, но проблема не была решена. CSS уже используется в существующем коде виджета, но justify-content:center действительно преуспел. Спасибо!

Nirmalya 17.05.2022 13:10
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
2
27
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

поместите виджет в оболочку div. добавить класс в этот div. для например. .wrapper сделайте ширину обертки 100% и установите justify-content:center

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

css

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

Большое спасибо. Хотя это не сработало, я скопировал содержимое css под стиль блока, и он идеально выровнял блок по центру. Благодаря тонну!

Nirmalya 17.05.2022 13:06

Другие вопросы по теме