Member Avatar for a.emara47

I have an image and i want to center it with

margin: 0 auto;

but it doesn't work so how can i center it in the top of the page ?

  • 3 Contributors
  • 4 Replies
  • 190 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by a.emara47

Dani AI

Generated

As suggested, putting the logo inside a wrapper and centering that wrapper is the right idea — but a few conditions must be met for centering to take effect. Common reasons the image still appears off-center: the image is treated as an inline element while margin-centering requires a block with a width (or the parent needs text-align), the image or parent is floated, HTML is malformed (an </img> closing tag is invalid), the page is in quirks mode (missing DOCTYPE), or another CSS rule is overriding the centering.

Two simple, modern approaches that avoid those pitfalls:

<!-- text-align on the parent (works for inline images) -->
<div class="logo-wrap">
  <img src="logo.png" alt="Logo" class="logo">
</div>

.logo-wrap { text-align: center; }
.logo { display: inline-block; }
/* make the image a block and center with auto margins (works well for fixed or intrinsic width images) */
.logo { display: block; margin: 0 auto; max-width: 100%; height: auto; }

For responsive layouts, display:flex on the wrapper with justify-content: center is also reliable.

Quick troubleshooting checklist: replace any invalid </img> tags with a proper <img ...> element; check for float on the image or parent and remove it; confirm the wrapper actually receives the width/style (inspect computed styles in browser dev tools); ensure a standards DOCTYPE is present; and clear caches after CSS changes. Comparing the live page’s computed styles against the working JSFiddle mentioned by often reveals the exact conflicting rule.

Recommended Answers

All 4 Replies

Member Avatar for drjohn

Put it in a div, give the div a width, and centre the div.

Member Avatar for a.emara47

Put it in a div, give the div a width, and centre the div.

I did what you said but it didn't work !!!!

<div id="header">
<img src="........" </img>
</div>

and in css

#header {
width: 551px;
margin:0 auto;
}

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.