I sometimes build my Html website and need to add a few things after I finish which I didn't expect to put at the beginning for example like an image between the lines so I just open img tag and put the image without putting it in a div or span. so the problem is I don't know how to center it then. Is there any way to center an item that doesn't have a parent container? here is an example code

<html>
	<img src="img.jpg" alt="img">
</html> 
<style>text-align: center;</style>

the problem with this code is that it doesn't center anything I also tried to use literally all properties that can center like "justify-content: center; or align-items: center;" but the img doesn't move at all and I only can move it by using padding or margin which is not the best way to do.

Does anyone have an Idea of how I can center an item that doesn't have a parent Container like div or does this doesn't work in HTML/CSS?

html css 
2 Answers

If you want to fix your code so that it would work, be sure to add html it within the style section of your code. Like this:

<html>
	<img src="img.jpg" alt="img">
</html> 
<style>html { text-align: center; }</style>

But that will make everything centered. If you want only the image to be centered, do this: 

<html>
	<img src="img.jpg" id="myimage" alt="img">
</html> 
<style>#myimage { text-align: center; }</style>

OR

There's an alternate solution (which someone else already posted here), about using display:block and margin:0 auto -- that's also doable.

There are 2 ways that this could work for you:

Option 1:

<html>
	<img src="img.jpg" style="display:block; margin:0 auto;" alt="you should probably leave alt blank if the image is decorative, otherwise actually describe what it is">
</html> 
<style>html { text-align: center; }</style>

Option 2:

<html>
	<img src="img.jpg" id="#myimage" alt="img">
</html> 
<style>#myimage{ display:block;margin: 0 auto; }</style>

Ultimately, it comes down to actually learning CSS and how stylesheets work. You might want to do some learning about that, find some "learn CSS" videos on youtube and websites -- this is sorta core stuff, so if you don't understand it yet, research the basics a bit more.

answered Dec 28


Many developers struggle while working with images. Handling responsiveness and alignment is particularly tough, especially centering an image in the middle of the page.

Let's begin with centering an image horizontally by using 3 different CSS properties.

  1. Text-Align
  2. Margin: auto
  3. Display: Flex

Text-Align

The first way to center an image horizontally is using the text-align property. However, this method only works if the image is inside a block-level container such as a <div>:

<style>
  div {
    text-align: center;
  }
</style>

<div>
  <img src="your-image.jpg">
</div>

margin: auto

Another way to center an image is by using the margin: auto property (for left-margin and right-margin).

img {
  width: 60%;
  margin: auto;
  display: block;
}

Display: Flex

The third way to center an image horizontally is by using display: flex. Just like we used the text-align property for a container, we use display: flex it for a container as well.

However, using display: flex alone will not be enough. The container must also have an additional property called justify-content:

div {
  display: flex;
  justify-content: center;
}

img {
  width: 60%;
}

Bonus: Centering an Image Vertically

Display: Flex

For vertical alignment, using display: flex is again really helpful.

Consider a case where our container has a height of 800px, but the height of the image is only 500px:

div {
  display: flex;
  justify-content: center;
  height: 800px;
}

img {
  width: 60%;
  height: 500px;
}

Now, in this case, adding a single line of code to the container, align-items: center, does the trick:

div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 800px;
}

The align-items property can position elements vertically if used together with display: flex.

answered Dec 28


Login and Submit Your Answer
Browse other questions tagged  html  css or ask your own question.