0

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
9
Views
4 Years
Discussion Span
Last Post by ctkam
0

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

Edited by JorgeM

0

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

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

0

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.

0

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

0

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.