Member Avatar for ctkam

how to make the image shows side by side but center of the div

thankx in advance

the css used

.img-wrap {
    width:200px;
    margin: auto;
}

.img-wrap img{
    display:inline-block;
    float:left;
}

the html

    <div class="img-wrap">
       <img src="img/first.png" /><img src="img/second.png" />
    </div>
  • 4 Contributors
  • 7 Replies
  • 227 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by ctkam

Dani AI

Generated

Two quick points that explain why the float approach in the thread behaved oddly, and two simple alternatives that avoid fixing the wrapper width.

Floats remove elements from normal flow, so a float-based layout tends to (a) require a parent width to control where the floats sit and (b) need clearing if you want the parent to size to the floated children. That explains why changing .img-wrap width made the images appear centered — you effectively gave the floated children a centered box to sit in. and were on the right track with containers and floats, but floats are brittle for this use-case.

A modern, robust solution (no float, no fixed wrapper width):

.img-wrap {
  display: flex;
  justify-content: center; /* centers the row of images */
  gap: 8px;                /* space between images */
  align-items: center;
}
.img-wrap img {
  max-width: 100%;
  height: auto;
  display: block;
}

A simpler, widely compatible alternative (inline layout):

.img-wrap { text-align: center; }
.img-wrap img { display: inline-block; vertical-align: middle; margin: 0 4px; }

Note: when using inline-block you may see a small gap between images caused by the HTML whitespace between tags. Fixes include removing the space in HTML, commenting it out, or setting .img-wrap { font-size: 0; } and restoring font-size on the images.

Troubleshooting checklist: confirm combined image widths + gaps fit the parent; remove conflicting float rules if switching to flex or inline-block; use flex-wrap if you want them to wrap responsively; add overflow: auto or a clearfix if you must keep floats. The approach above will center the two images without manually guessing a wrapper width.

Recommended Answers

All 7 Replies

Member Avatar for JorgeM

So, do you have a question about this topic. Its not clear regarding your post, at least not to me.

Edited by JorgeM
Member Avatar for Member #949455

Centering the floating image

You need a another container to contain those 2 images.

For example something like this:

<div class="container">
<div class="left">
<img src="img/first.png" />
</div>
<div class="right">
<img src="img/second.png" />
</div>
</div>

You CSS will be like this:

<style>
div.container{width:100%;}
div.left {
    width: 50%;
    float: left;
}
div.right {
    width: 50%;
    float: left;
}
</style>
Member Avatar for ctkam

JorgeM
i want to locate 2 image side by side but in center of a <div>

LastMitch
thankx. done as suggested. but it happen to have space in between of the image and the starting margin start from left of the screen

Member Avatar for Member #949455

thankx. done as suggested. but it happen to have space in between of the image and the starting margin start from left of the screen

It's floating left. You can adjusted the CSS by yourself.

I gave you an example for you to undersand and how to used it.

You can playing around with it.

That's the purpose for you learn and understand how it works!

I think you are very close of adjusting the CSS to fit your images.

Member Avatar for ctkam

hahahaha .. LastMitch thankx lesson learn :D
i've tried to add a lots of things over the CSS still turn out not as i wanted
but it's getting close

Member Avatar for arun1123

You need to float the images inside the DIV.

CSS

#divImgContainer img {float:left;}

HTML

<div id="divImgContainer">
    <img src="image1.jpg" width="160px" height="94px" />
    <img src="image2.jpg" width="160px" height="94px" />
</div>

Also check for more of "Centering a DIV" using CSS.

Arun

Member Avatar for ctkam

Thankx guys .. solved by changing size of .img-wrap

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.