Centering the floating image

[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>

[JorgeM]

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

[LastMitch]

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>

[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

[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

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.

[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

[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

[ctkam]

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