Trying to Center an Image in DreamWeaver

[Bonk]

Here I feel I should preface with a few caveats:

1. I’ve used HTML in the past, but it’s been nearly a decade (I used to be a technical writer but now I deliver mail). Back then it was HTML 5. I remain unschooled as to what HTML has morphed since into. One thing I do know is that you can’t use the attribute align=center in an img tag anymore.

2. I am about as new as you can get to CSS, how they work, and where they do and don’t work. I do not understand terminology like “bootstrap”, “inline”, or anything similar.

3. Currently I am on a quest to center an SVG image on a webpage I am building in DreamWeaver (I used to employ plain text to code the HTML). The level of aid in the so-called Adobe DW help forum has been nothing short of abysmal. I have pasted a screenshot there showing my entire workspace, with a split screen that shows the entirety of my coding as well as the preview. Not one of the ‘experts’ there were able to solve my issue, and I’m getting the awful suspicion that one can no longer center images on a webpage.

---

All that being said, I would like to know how to center an SVG image using HTML/CSS coding. If there isn’t a way to do this, I would like to know this as well.

I am quite willing to show my ‘progress’ thus far, and no useful critique will be taken as personal. I simply seek solutions.

Unsure if this picture I uploaded will work, as the posting tool seems to lack a preview function. If I have to, however, I shall be glad to copy/paste the code directly into a post.

Thanks,

• Bonk

[Teller]

Welcome to the forum @Bonk

Firstly, consider studying the Responsive Web Design certificate on freeCodeCamp. Since you already have html experience, you just need to level up your coding skills to include cascading style sheets.

freeCodeCamp.org

Your div container for the img element needs to have styling properties to apply to its child elements.

<div class="col text-center">
      <img>
</div>

Add an id attribute to the div container with the attribute value set to logo

<div class="col text-center" id="logo">

Then between the style tags within the head element, add the following code.

#logo {
  width: 300px;
  margin: auto;
}

You may need to adjust the width property value.

Happy coding

[Bonk]

IT WORKED! I am building a temple to you.
Bonk