Member Avatar for alaa sam

Hi everyone , I've just started to learn html , and I want to change the position of the images that I insert in my page , how can I do this ??

<img src="networking.jpg" width="200" height="300" />
  • 2 Contributors
  • 2 Replies
  • 88 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by alaa sam

Dani AI

Generated

For : 's absolute-position solution is fine when you need pixel-perfect placement, but it removes the image from the normal document flow and can cause overlap or layout problems on resize. For most layouts, use techniques that keep the image in flow or use modern layout tools so the page behaves well on different screen sizes.

Center an image horizontally with margin auto:

img.center {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

Let text wrap around an image with float:

img.thumb {
  float: left;
  margin: 0 12px 12px 0;
}

Center both axes with flexbox (apply to the image container):

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Quick tips and common pitfalls: if a centered image still aligns left, ensure it is block-level and has a width smaller than its container. If you use floats, clear them or use a clearfix so parent height is preserved. If you must use absolute positioning, scope it by giving the parent position: relative and watch z-index. For responsive pages, add max-width: 100% and height: auto, include meaningful alt text, and consider object-fit/object-position or background images for cropping.

Recommended Answers

All 2 Replies

Member Avatar for Skorpio07

how about this:

<style type=text/css>
.imgpos {
	position: absolute;
	top: 50px;
	left: 150px;
}
</style>
</head>
<body width="auto">
	<span class="imgpos">
		<img src="../networking.png">
	</span>
</body>
</html>
Edited by Skorpio07 because: n/a
Member Avatar for alaa sam

thanx a lot

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.