CODEWITHSUNDEEP
htmlimagetextboxboxrelativesource
TheInflationRate
TheInflationRate

Reputation: 9

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

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.

Upvotes: -2

Views: 68

Answers (1)

AJ Ande
AJ Ande

Reputation: 121

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>

Upvotes: 0

Related Questions