I am having trouble using "style" to center an image relative to a box. This is for html specific code, within ArcGIS/ESRI website development

Question

This is very likely not pretty code (apologies), but I am trying to fit an image into a defined text box that is centered and adjusts based on the size of the window.

Here is what I have currently.

    <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">
                  <img class="pos-state__image" style="text-align: center;" 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>

I have tried to use a few different "style"'s but I do not know which ones are used for images. Nothing seems to move the image to the center of the box I have established. Also, I cannot use CSS language as I am using ArcGIS in a textbox and it only allows editing via html.

I’m voting to close this question because ["Can Someone Help Me?" is not an actual question](https://meta.stackoverflow.com/a/284237/162698) — Rob, Jul 13 '23 at 13:54
Hi Rob, thank you for sharing the link to the thread. This was my first question and I was not aware of the nuances of stack overflow. I have edited the title to hopefully be more in line with what a good question would look like. — TheInflationRate, Jul 14 '23 at 15:01

score 0 · Answer 1 · answered Jul 12 '23 at 15:52

This centers the image but it's using css, if you don't want to use css, your still adding inline styling so that counts as css anyways, but for your inline styling in the image tag, you could use "position:absolute, top:50%, left:50%, transform(translate(-50%,-50%);" instead. But I added some styling in the head section.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .card-content {
            display:flex;
            align-items:center;
            justify-content:center;
            flex-direction:column;
        }
    </style>
</head>
<body>
    <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">
                      <img class="pos-state__image" src="../images/favicon.png" 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>
</body>
</html>

Hi AJ, thank you for your response. As you can probably tell, I am not adept at this. I tried both of your options and they did not seem to change the output. For the css style input, it autochanged to <!DOCTYPE html> <html lang="en"> and it did not recognize the start tag Are you familiar with ArcGIS/ESRI? Do you know why this might be? — TheInflationRate, Jul 12 '23 at 18:03

I am having trouble using "style" to center an image relative to a box. This is for html specific code, within ArcGIS/ESRI website development

1 Answers1