Проблема с выравниванием изображения по центру с помощью HTML и CSS
Возьмите этот HTML:
<aside id = "media_image-3" class = "widget widget_media_image" style = "box-sizing: inherit; margin-bottom: 1rem; color: rgb(153, 153, 153); font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(249, 249, 249); text-decoration-style: initial; text-decoration-color: initial;">
<h3 class = "widget-title" style = "box-sizing: inherit; font-family: Dosis, sans-serif; font-style: normal; font-weight: 700; color: rgb(119, 119, 119); margin-top: 0px; margin-bottom: 0.375rem; font-size: 1.75rem; line-height: 1.2857; hyphens: none !important;">
We Support</h3>
<figure class = "wp-caption alignnone" style = "box-sizing: inherit; margin: 16px 0px; max-width: 100%; padding: 0.25rem; width: 200px;">
<a href = "http://www.healthstaffdiscounts.co.uk/" style = "box-sizing: inherit; background-color: transparent; color: rgb(153, 153, 153); text-decoration: underline; outline: none; transition: all 0.5s ease 0s;">
<img alt = "NHS Smart Card Discounts" class = "image widget-footer-image" height = "125" src = "https://www.healthstaffdiscounts.co.uk/nhsdiscounts.jpg" style = "box-sizing: inherit; border: 0px; max-width: 100%; height: auto; vertical-align: top; text-align: center;"
width = "200" /></a>
<figcaption class = "wp-caption-text" style = "box-sizing: inherit; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-style: italic; font-weight: 400; font-size: 0.875rem; line-height: 1.5; color: rgb(119, 119, 119); text-align: center;">
NHS Smart Card Discounts</figcaption>
</figure>
</aside>
<aside id = "media_image-6" class = "widget widget_media_image" style = "box-sizing: inherit; margin-bottom: 1rem; color: rgb(153, 153, 153); font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(249, 249, 249); text-decoration-style: initial; text-decoration-color: initial;">
<h3 class = "widget-title" style = "box-sizing: inherit; font-family: Dosis, sans-serif; font-style: normal; font-weight: 700; color: rgb(119, 119, 119); margin-top: 0px; margin-bottom: 0.375rem; font-size: 1.75rem; line-height: 1.2857; hyphens: none !important;">
We Develop For</h3>
<a href = "https://www.bricsys.com/en-gb/" style = "box-sizing: inherit; background-color: transparent; color: rgb(44, 125, 190); text-decoration: underline; outline: 0px; transition: all 0.5s ease 0s;">
<img alt = "BricsCAD Trademark" class = "image wp-image-287 attachment-medium size-medium" height = "66" sizes = "(max-width: 300px) 100vw, 300px" src = "https://www.trucklesoft.co.uk/wp-content/uploads/2019/04/bricscad-trademark-300x66.png" srcset = "https://www.trucklesoft.co.uk/wp-content/uploads/2019/04/bricscad-trademark-300x66.png 300w, https://www.trucklesoft.co.uk/wp-content/uploads/2019/04/bricscad-trademark.png 684w"
style = "box-sizing: inherit; border: 0px; max-width: 100%; height: auto; vertical-align: top;" width = "300" /></a>
</aside>Это первый aside объект:
Как мне заставить его выровняться по центру, как остальные?
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
0
66
3
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 3
Ответ принят как подходящий
Добавьте поле auto к left и right лайк margin: 16px auto
<figure class = "wp-caption alignnone" style = "box-sizing: inherit; margin: 16px auto; max-width: 100%; padding: 0.25rem; width: 200px;">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset=utf-8" http-equiv = "Content-Type" />
<title>Untitled 1</title>
</head>
<body>
<aside id = "media_image-3" class = "widget widget_media_image" style = "box-sizing: inherit; margin-bottom: 1rem; color: rgb(153, 153, 153); font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(249, 249, 249); text-decoration-style: initial; text-decoration-color: initial;">
<h3 class = "widget-title" style = "box-sizing: inherit; font-family: Dosis, sans-serif; font-style: normal; font-weight: 700; color: rgb(119, 119, 119); margin-top: 0px; margin-bottom: 0.375rem; font-size: 1.75rem; line-height: 1.2857; hyphens: none !important;">
We Support</h3>
<figure class = "wp-caption alignnone" style = "box-sizing: inherit; margin: 16px auto; max-width: 100%; padding: 0.25rem; width: 200px;">
<a href = "http://www.healthstaffdiscounts.co.uk/" style = "box-sizing: inherit; background-color: transparent; color: rgb(153, 153, 153); text-decoration: underline; outline: none; transition: all 0.5s ease 0s;">
<img alt = "NHS Smart Card Discounts" class = "image widget-footer-image" height = "125" src = "https://www.healthstaffdiscounts.co.uk/nhsdiscounts.jpg" style = "box-sizing: inherit; border: 0px; max-width: 100%; height: auto; vertical-align: top; text-align: center;" width = "200" /></a><figcaption class = "wp-caption-text" style = "box-sizing: inherit; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-style: italic; font-weight: 400; font-size: 0.875rem; line-height: 1.5; color: rgb(119, 119, 119); text-align: center;">
NHS Smart Card Discounts</figcaption>
</figure>
</aside>
<aside id = "media_image-6" class = "widget widget_media_image" style = "box-sizing: inherit; margin-bottom: 1rem; color: rgb(153, 153, 153); font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(249, 249, 249); text-decoration-style: initial; text-decoration-color: initial;">
<h3 class = "widget-title" style = "box-sizing: inherit; font-family: Dosis, sans-serif; font-style: normal; font-weight: 700; color: rgb(119, 119, 119); margin-top: 0px; margin-bottom: 0.375rem; font-size: 1.75rem; line-height: 1.2857; hyphens: none !important;">
We Develop For</h3>
<a href = "https://www.bricsys.com/en-gb/" style = "box-sizing: inherit; background-color: transparent; color: rgb(44, 125, 190); text-decoration: underline; outline: 0px; transition: all 0.5s ease 0s;">
<img alt = "BricsCAD Trademark" class = "image wp-image-287 attachment-medium size-medium" height = "66" sizes = "(max-width: 300px) 100vw, 300px" src = "https://www.trucklesoft.co.uk/wp-content/uploads/2019/04/bricscad-trademark-300x66.png" srcset = "https://www.trucklesoft.co.uk/wp-content/uploads/2019/04/bricscad-trademark-300x66.png 300w, https://www.trucklesoft.co.uk/wp-content/uploads/2019/04/bricscad-trademark.png 684w" style = "box-sizing: inherit; border: 0px; max-width: 100%; height: auto; vertical-align: top;" width = "300" /></a></aside>
</body>
</html>Понял: .widget-area figure{margin: 16px auto;}
—
30.04.2019 15:55
Вы можете добавить css
.wp-caption .alignnone{
width: 100%;
}
.wp-caption .alignnone{
width: 100%;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset=utf-8" http-equiv = "Content-Type" />
<title>Untitled 1</title>
</head>
<body>
<aside id = "media_image-3" class = "widget widget_media_image" style = "box-sizing: inherit; margin-bottom: 1rem; color: rgb(153, 153, 153); font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(249, 249, 249); text-decoration-style: initial; text-decoration-color: initial;">
<h3 class = "widget-title" style = "box-sizing: inherit; font-family: Dosis, sans-serif; font-style: normal; font-weight: 700; color: rgb(119, 119, 119); margin-top: 0px; margin-bottom: 0.375rem; font-size: 1.75rem; line-height: 1.2857; hyphens: none !important;">
We Support</h3>
<figure class = "wp-caption alignnone" style = "box-sizing: inherit; margin: 16px auto; max-width: 100%; padding: 0.25rem; width: 200px;">
<a href = "http://www.healthstaffdiscounts.co.uk/" style = "box-sizing: inherit; background-color: transparent; color: rgb(153, 153, 153); text-decoration: underline; outline: none; transition: all 0.5s ease 0s;">
<img alt = "NHS Smart Card Discounts" class = "image widget-footer-image" height = "125" src = "https://www.healthstaffdiscounts.co.uk/nhsdiscounts.jpg" style = "box-sizing: inherit; border: 0px; max-width: 100%; height: auto; vertical-align: top; text-align: center;" width = "200" /></a><figcaption class = "wp-caption-text" style = "box-sizing: inherit; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-style: italic; font-weight: 400; font-size: 0.875rem; line-height: 1.5; color: rgb(119, 119, 119); text-align: center;">
NHS Smart Card Discounts</figcaption>
</figure>
</aside>
<aside id = "media_image-6" class = "widget widget_media_image" style = "box-sizing: inherit; margin-bottom: 1rem; color: rgb(153, 153, 153); font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(249, 249, 249); text-decoration-style: initial; text-decoration-color: initial;">
<h3 class = "widget-title" style = "box-sizing: inherit; font-family: Dosis, sans-serif; font-style: normal; font-weight: 700; color: rgb(119, 119, 119); margin-top: 0px; margin-bottom: 0.375rem; font-size: 1.75rem; line-height: 1.2857; hyphens: none !important;">
We Develop For</h3>
<a href = "https://www.bricsys.com/en-gb/" style = "box-sizing: inherit; background-color: transparent; color: rgb(44, 125, 190); text-decoration: underline; outline: 0px; transition: all 0.5s ease 0s;">
<img alt = "BricsCAD Trademark" class = "image wp-image-287 attachment-medium size-medium" height = "66" sizes = "(max-width: 300px) 100vw, 300px" src = "https://www.trucklesoft.co.uk/wp-content/uploads/2019/04/bricscad-trademark-300x66.png" srcset = "https://www.trucklesoft.co.uk/wp-content/uploads/2019/04/bricscad-trademark-300x66.png 300w, https://www.trucklesoft.co.uk/wp-content/uploads/2019/04/bricscad-trademark.png 684w" style = "box-sizing: inherit; border: 0px; max-width: 100%; height: auto; vertical-align: top;" width = "300" /></a></aside>
</body>
</html>Установите ширину вашего <aside> на 100% и добавьте text-align:center к его стилю.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset=utf-8" http-equiv = "Content-Type" />
<title>Untitled 1</title>
</head>
<body>
<aside id = "media_image-3" class = "widget widget_media_image" style = "box-sizing: inherit; margin-bottom: 1rem; color: rgb(153, 153, 153); font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(249, 249, 249); text-decoration-style: initial; text-decoration-color: initial;">
<h3 class = "widget-title" style = "box-sizing: inherit; font-family: Dosis, sans-serif; font-style: normal; font-weight: 700; color: rgb(119, 119, 119); margin-top: 0px; margin-bottom: 0.375rem; font-size: 1.75rem; line-height: 1.2857; hyphens: none !important;">
We Support</h3>
<figure class = "wp-caption alignnone" style = "box-sizing: inherit; margin: 16px 0px; max-width: 100%; padding: 0.25rem; width: 100%; text-align:center">
<a href = "http://www.healthstaffdiscounts.co.uk/" style = "box-sizing: inherit; background-color: transparent; color: rgb(153, 153, 153); text-decoration: underline; outline: none; transition: all 0.5s ease 0s;">
<img alt = "NHS Smart Card Discounts" class = "image widget-footer-image" height = "125" src = "https://www.healthstaffdiscounts.co.uk/nhsdiscounts.jpg" style = "box-sizing: inherit; border: 0px; max-width: 100%; height: auto; vertical-align: top; text-align: center;"
width = "200" />
</a>
<figcaption class = "wp-caption-text" style = "box-sizing: inherit; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-style: italic; font-weight: 400; font-size: 0.875rem; line-height: 1.5; color: rgb(119, 119, 119); text-align: center;">
NHS Smart Card Discounts</figcaption>
</figure>
</aside>
<aside id = "media_image-6" class = "widget widget_media_image" style = "box-sizing: inherit; margin-bottom: 1rem; color: rgb(153, 153, 153); font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(249, 249, 249); text-decoration-style: initial; text-decoration-color: initial;">
<h3 class = "widget-title" style = "box-sizing: inherit; font-family: Dosis, sans-serif; font-style: normal; font-weight: 700; color: rgb(119, 119, 119); margin-top: 0px; margin-bottom: 0.375rem; font-size: 1.75rem; line-height: 1.2857; hyphens: none !important;">
We Develop For</h3>
<a href = "https://www.bricsys.com/en-gb/" style = "box-sizing: inherit; background-color: transparent; color: rgb(44, 125, 190); text-decoration: underline; outline: 0px; transition: all 0.5s ease 0s;">
<img alt = "BricsCAD Trademark" class = "image wp-image-287 attachment-medium size-medium" height = "66" sizes = "(max-width: 300px) 100vw, 300px" src = "https://www.trucklesoft.co.uk/wp-content/uploads/2019/04/bricscad-trademark-300x66.png" srcset = "https://www.trucklesoft.co.uk/wp-content/uploads/2019/04/bricscad-trademark-300x66.png 300w, https://www.trucklesoft.co.uk/wp-content/uploads/2019/04/bricscad-trademark.png 684w"
style = "box-sizing: inherit; border: 0px; max-width: 100%; height: auto; vertical-align: top;" width = "300" /></a>
</aside>
</body>
</html>Тег <center> устарел, не используйте его.
—
30.04.2019 15:46
теперь это то же самое, что и первый ответ, теперь это хорошо :) Вы все еще можете улучшить свой ответ, избавившись от старого синтаксиса doctype и используя HTML5 (он существует уже добрых 10 лет)
—
30.04.2019 15:59
@cloned Весь этот код типа документа взят из исходного вопроса OP, который, похоже, он отредактировал. Я лично ничего из этого не использую.
—
30.04.2019 16:01
Мой фактический веб-сайт Wordpress. Я извлек немного в Expression Web для тестирования. Это был единственный редактор, который у меня был. Кто-то еще отредактировал мой вопрос и превратил его в скрипку. Но я разобрался. Спасибо.
—
30.04.2019 23:39
Другие вопросы по теме
Селектор Css ">" и "display:contents", каков ожидаемый результат?
Как изменить часть границы на другой цвет в таблице?
Как сделать так, чтобы заголовок карусели отображался сверху?
Как создать несколько таблиц с помощью кнопки «Далее» или вкладки, ведущей к другой форме
Изменение onClick диапазона при нажатии на него с помощью JS
Как выбрать последний или следующий элемент списка с помощью кнопок
Зазор столбца Bootstrap
Как получить родственный элемент каждого селектора с помощью jQuery
Почему нумерация страниц отображается вне основного раздела в Firefox с помощью swiper?
Как связать свойство border-color в шаблоне, похожее на цвет фона
Похожие вопросы
RegEx для извлечения внутренней ссылки в теге привязки и добавления в нее чего-либо
Селектор Css ">" и "display:contents", каков ожидаемый результат?
Как изменить часть границы на другой цвет в таблице?
Как получить массив карт в Javascript для печати в раскрывающемся списке
Есть ли способ загрузить сайты с Google Site?
Как сделать так, чтобы заголовок карусели отображался сверху?
Самодельный преобразование текста в речь в javascript не работает должным образом
Как создать несколько таблиц с помощью кнопки «Далее» или вкладки, ведущей к другой форме
Изменение значения элемента с помощью кнопки
Изменение onClick диапазона при нажатии на него с помощью JS
Спасибо. Я изо всех сил пытаюсь применить это в моей дополнительной области CSS Wordpress.