Skip to main content
W
WHough
Known Participant
May 12, 2024
Answered

Centering an Image? Must it be this difficult?

  • May 12, 2024
  • 4 replies
  • 2418 views

Brand new to DW. Having performed due dilligence first and searched previous discussions for a useful answer, I must submit that this thread:

Solved: Re: Centering an image in Dreamweaver - Page 2 - Adobe Community - 2489936

is outdated, because none of the suggestions therein seem to work with CC 21.4.

 

Let's fast-forward to 2024, shall we? I have been all over the web looking for the inexplicably hidden secret as to how to center a simple image.

I have tried internal, extermal, and inline CSS containing .center .

I have tried adding the attribute class="center" to the img tag.

I suppose the next thing I'll have to do is reach for my VISA and pay somebody off, because I don't know what else to do.

Here is what I have:

 

Funny...in HTML5 all you had to do was add align=center to the img tag. Guess it wasn't cryptic enough.

This topic has been closed for replies.
Correct answer osgood_
quote

Just to tick it off the list, the following didn't work either:

.container {
display: grid;
place-content: center;
}

Assuming, of course, that this was intended to be placed into a CSS (correct term, usage?) style that defined img. Precise placement was not specified.


By @WHough

 

No you don't attached the css to the image, you attach it to the parent container the image is located in:

 

<div class="centerContent">

<img src="myImage.jpg" alt="" width="400" height="200">

</div>

 

.centerContent {

display: grid;

place-content: center;

}

4 replies

W
WHoughAuthor
Known Participant
May 12, 2024

Look, people.

 

Consider: I am a neophyte DW user, trying to extropolate from the Adobe Community a method for centering an image on a webpage. I see very little mystery or hidden meaning in that.

 

Yet, for all the very appreciated time and effort that went into the varying suggestions, none of them has worked. We are talking about centering a simple PNG on a basic webpage.  So I just pray that someone -- anyone --  can understand why it has been a challenge for me to keep my frustration in check, and another prayer that someone -- anyone --  will amble along and provide me with the correct fix.

- WH

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
May 12, 2024

We can't see what else you have going on.  So I won't waste your time or mine playing 20 questions.

 

To horizontally center an element, you need just 3 things:

1. A valid document type.

2. A stated container width.

3. Auto margins.

 

Working demo with 2 examples. Example 1 has limited image width; example 2 has unlimited image width.

 

HTML & CSS Code:  Copy & paste into a new, blank document.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Horizontal Centering Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--DEMO STLYES-->
<style>
body {
background:antiquewhite;
color:darkcyan;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-size: 1.5rem;
}
.container {
width: 75%;
margin: 0 auto;
padding:2%;
border: 3px solid silver;
background-color:honeydew;
}
.example1 img {max-width:100%;}
.example2 img {width:100%;}
</style>
</head>

<body>
<div class="container example1">
<h3>Example 1:</h3>
<img src="https://dummyimage.com/900x400" alt="placeholder">
</div>
<div class="container example2">
<h3>Example 2:</h3>
<img src="https://dummyimage.com/900x400" alt="placeholder">
</div>
</body>
</html>

 

Nancy O'Shea— Product User & Community Expert
    W
    WHoughAuthor
    Known Participant
    May 12, 2024

    "We can't see what else you have going on.  So I won't waste your time or mine playing 20 questions."

    Unsure what this means, since in both cases that I've included an image, it showed the entirety of my DW workspace, including a split screen with the current content. Nothing else outside that.

     

    And, not to put too fine a point on it , I daresay there is nothing in the above example that demonstrates how to center an image.

    Therefore, I can only assume:

    1) You all know a simple answer, and won't reveal it to me, for whatever reasons your propensity for mind games dictates,

    2) None of you know the answer, because few if any of you are the experts you claim to be, or

    3) There really isn't an answer; DW or CSS or the new HTML or whatever simply exluded the functionality for centering an image.

    This place is unbelievable. It's like asking a hunk of plastic to perform a simple calculation. Truth be told, I suspected all along that I wasn't going to get any real help, but I had to check it off the list. I'll find my answers elsewhere. I only wish there was a way to mark the post as unsatisfactory.

    W
    WHoughAuthor
    Known Participant
    May 12, 2024

    I appreciate all the suggestions; unfortunately, none of them worked. I have included a screenshot to prove it.

    As you can see, the image did not horizontally center.

     

    I guess I need to be more specific regarding my experience with DW: None. Zero. Nada. Perhaps a few hours at best. So much for terms such as "bootstrap", "block-level", and so forth. The last time I attempted any kind of web coding was HTML5 and that was nearly a decade ago.

     

    Look upon my attempt and see if you can tell me what I left out. Perhaps a default setting in DW that I need to turn off? I'm starting to wonder if I'm going to have to go questing for a plug-in next.

    W
    WHoughAuthor
    Known Participant
    May 12, 2024

    Just to tick it off the list, the following didn't work either:

    .container {
    display: grid;
    place-content: center;
    }

    Assuming, of course, that this was intended to be placed into a CSS (correct term, usage?) style that defined img. Precise placement was not specified.

    O
    osgood_Correct answer
    Legend
    May 12, 2024
    quote

    Just to tick it off the list, the following didn't work either:

    .container {
    display: grid;
    place-content: center;
    }

    Assuming, of course, that this was intended to be placed into a CSS (correct term, usage?) style that defined img. Precise placement was not specified.


    By @WHough

     

    No you don't attached the css to the image, you attach it to the parent container the image is located in:

     

    <div class="centerContent">

    <img src="myImage.jpg" alt="" width="400" height="200">

    </div>

     

    .centerContent {

    display: grid;

    place-content: center;

    }

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    May 12, 2024

    Just so that you are correctly informed about Bootstrap, this is how it works:

    1. Containers are wrappers for Rows
    2. Rows are wrappers for Columns
    3. Columns are wrappers for content

     

    In other words, an image needs to be contained within a Column.

     

    To centre an image, the image needs to be transformed from an inline-block level to a block level. This can be done using the Bootstrap d-block class. Then, the image needs to have a left margin set to auto. This will push the image to the right. Adding a right margin to auto, will push the image to the center.

     

    The HTML will look like

    <div class="container">
    <div class="row">
        <div class="col">
            <img class="d-block mx-auto" src="/images/myImage.webp" width="200" height="100" alt="My Image">
        </div>
    </div>

     

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    O
    osgood_
    Legend
    May 12, 2024
    quote

     

    To centre an image, the image needs to be transformed from an inline-block level to a block level. This can be done using the Bootstrap d-block class. Then, the image needs to have a left margin set to auto. This will push the image to the right. Adding a right margin to auto, will push the image to the center.

     

    By @BenPleysier

     

     

    This will do it without the necessity to use d-block/mx-auto on the img tag

     

     

     

    <div class="container">
<div class="row">
<div class="col text-center">
<img src="yourImage.jpg" alt="" width="200" height="100">
</div>
</div>
</div>

     

     

     

     

    OR better still, without Bootstrap:

     

    .container {
    display: grid;
    place-content: center;
    }

     

     

    <div class="container">
    <img src="yourImage.jpg" alt="" width="200" height="100">
    </div>
    W
    WHoughAuthor
    Known Participant
    May 12, 2024

    Wish I knew what bootstrap was. Brand new, remember (see original post).

    O
    osgood_
    Legend
    May 12, 2024

    Well it looks like you are using Bootstrap and setting the column to 50% of the browser window width by using col-md-6 so your image won't be horizontally centered on the screen if that is what you require.

     

    The class of text-center set on the div which contains the image should be sufficient to center the image on screen IF the div which the image is located within is set to the full width of the screen and not 50% of it.

     

    Follow the advised Bootstrap set up which requires you to enclose your div in a 'container' or 'container-fluid' div and 'row'  div:

     

    <div class='container'>

    <div class='row'>

    Your content should be inserted here.

    </div>

    </div>

     

     

     

     

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices