使用 HTML 和 CSS 在中心对齐图像时出现问题

【问题标题】：Problem aligning an image in the center using HTML and CSS使用 HTML 和 CSS 在中心对齐图像时出现问题
【发布时间】：2019-09-19 04:32:47
【问题描述】：

获取此 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 css image alignment


    【解决方案1】：

    将 &lt;aside&gt; 的宽度设置为 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>

    【讨论】：

    • &lt;center&gt; 标签已弃用，请勿使用。
    • 现在它与第一个答案相同，现在很好:) 您仍然可以通过摆脱旧的 doctype 语法并使用 HTML5 来改进您的答案（它已经存在了 10 年）
    • @cloned 所有 doctype 代码都来自 OPs 的原始问题，看起来他已经编辑掉了。我个人不使用任何一个。
    • 我的实际网站是 Wordpress。我已经提取了一点到 Expression Web 中进行测试。这是我唯一的编辑器。其他人编辑了我的问题并将其变成了小提琴。但我已经解决了。谢谢。
    【解决方案2】：

    你可以添加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>

    【讨论】：

      【解决方案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: &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>

      【讨论】：

      • 谢谢。我正在努力在我的 Wordpress 附加 CSS 区域中应用它。
      • 知道了：.widget-area figure{margin: 16px auto;}
      猜你喜欢
      • 2021-02-19
      • 1970-01-01
      • 1970-01-01
      • 2016-01-28
      • 2011-07-10
      • 1970-01-01
      • 2011-06-25
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode