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.
1 Correct answer
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;
...
17
Replies
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>
Wish I knew what bootstrap was. Brand new, remember (see original post).
By @WHough
You're using Bootstrap css classes in your code - col-md-6, text-center, so we are assuming you are using Bootstrap to construct your html.
Bootstrap is a css, javacript front end library for creating, building responsive web applications.
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.
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;
}
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>
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.
By @WHough
Its advisable to go and learn some simple html and css before you post and you won't be so frustrated. Centering an image is a 30 seconds exercise for a child if they are paying attention. Sorry we couldn't be of any help........next one please.
AdChoices