ArcGIS/ESRI网站开发中HTML图片居中问题求助

问题分析 #

原代码给<img>设置text-align:center无效，因为text-align是控制块级元素内部行内元素对齐的属性，需要作用在图片的父容器上；同时缺少让图片随窗口自适应的样式规则。

修改方案 #

• 给图片的父容器.card-content添加text-align:center，让内部图片水平居中
• 给<img>添加max-width:100%; height:auto;，确保图片随容器宽度自适应，同时保持原有宽高比
• 可选补充：给<img>添加display:block; margin:0 auto;，双重保障居中效果（兼容更多渲染场景）

修改后的完整代码 #

<section style="color:#4c4c4c;background-color:transparent;" id="ember656" class="layout-section ember-view">
    <div class="container">
    <div id="ember658" class="bs-row row ember-view">
      <div id="ember660" class="col-sm-12 ember-view">
        <div id="ember661" class="markdown-card ember-view">
          <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="calcite-web">
              <div class="card-base" style="box-shadow: 5px 5px 15px 5px rgba(219,219,219,.6); border-radius: 10px;">
                <div class="card-content" style="text-align:center;">
                  <img class="pos-state__image" style="max-width:100%; height:auto; display:block; margin:0 auto;" src="IMG WEBSTE" alt="large light blue butterfly">
                  <h6 style="text-align: center;height:60px; font-size: 20px"><a href="LINK REFERENCE" target="_blank">NAME OF WEBSITE</a></h6>
                  <div aria-label="actions" class="btn-group btn-group-justified" role="group">
                    <a class="btn btn-primary" href="tel:6147221800" target="_blank">(614) 722 1800</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

关键样式说明 #

• text-align:center作用于.card-content，控制容器内所有行内/行内块元素（包括图片）水平居中
• max-width:100%限制图片宽度不超出父容器范围，height:auto自动匹配高度，保证图片比例不变
• display:block; margin:0 auto是独立的块级元素居中方法，和父容器的text-align配合，提升不同环境下的兼容性

内容的提问来源于stack exchange，提问作者TheInflationRate