Проблема выравнивания изображения в центре с использованием HTML и CSS - PullRequest
1 голос
/ 30 апреля 2019

Возьми этот 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: &quot;Open Sans&quot;, 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: &quot;Open Sans&quot;, 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: &quot;Open Sans&quot;, 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 объект:

HTML Preview

Как мне заставить его выравниваться по центру, как остальные?

Ответы [ 3 ]

2 голосов
/ 30 апреля 2019

Добавить поле 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: &quot;Open Sans&quot;, 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: &quot;Open Sans&quot;, 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: &quot;Open Sans&quot;, 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>
0 голосов
/ 30 апреля 2019

Установите ширину <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: &quot;Open Sans&quot;, 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: &quot;Open Sans&quot;, 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: &quot;Open Sans&quot;, 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>
0 голосов
/ 30 апреля 2019

Вы можете добавить 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: &quot;Open Sans&quot;, 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: &quot;Open Sans&quot;, 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: &quot;Open Sans&quot;, 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...