Center 2 different images in css

Question

How can I insert two images in css, center them ?

I would like to have something like that: link

My actual css look like this, with one image centered :

position: absolute; 
top: 0; 
bottom:0; 
left: 0; 
right:0;
margin: auto;

What do you mean with making 2 images centered at the same time? I do not see how that works out in your link either. Also where is your HTML? What selector does that CSS use? Could you post a [jsfiddle](http://jsfiddle.net)? — MarioDS, Jun 08 '14 at 10:17
Thank you MdeSchaepmeester and mostafaznv ,for the my next question i will post a jsdiffle. I have figured it out with the post from oopsoft. Anyway i appreciate your support. :) — SoSkandalouS, Jun 08 '14 at 15:53
Thanks i have figured it out :). http://jsfiddle.net/SoSoDef/FYHTQ/ — SoSkandalouS, Jun 08 '14 at 16:06

mostafaznv · Answer 1 · 2014-06-08T10:41:26.987

0

u can use margin-top or right and set position:absolute for img element in css

Live DEMO

CSS:

img{
    position:absolute;
    margin-top:100px;
    right:25%;
    width:50%;
}
#leftdiv{
    position:relative;
    float:left;
    background: #e7e7e7;
    height:500px;
    width:50%;

}
#rightdiv{
    position:relative;
    float:right;
    height:500px;
    width:50%;
    background: green;

}

HTML:

<div id='leftdiv'>
    <img src='http://icdn4.digitaltrends.com/image/microsoft_xp_bliss_desktop_image-650x0.jpg'/>
</div>
<div id='rightdiv'>
     <img src='http://icdn4.digitaltrends.com/image/microsoft_xp_bliss_desktop_image-650x0.jpg'/>
</div>

edited Jun 08 '14 at 10:41

answered Jun 08 '14 at 10:30

mostafaznv

958
14
24

Thanks mostafaznv. Really appreciate your help but now how can i add to the images a link ? Thanks again. – SoSkandalouS Jun 08 '14 at 15:55
@SoSkandalouS **see this:** http://jsfiddle.net/mostafaznv/FYHTQ/1/ you must use `` after `img` element – mostafaznv Jun 08 '14 at 16:19
if my answer was useful, you can push vote up button ;) – mostafaznv Jun 08 '14 at 16:20
Thangs again mate. I would like to vote, but at least i has to have 15 of reputation, at the moment i have only 4 :/. Soon as i can i will vote of course. – SoSkandalouS Jun 08 '14 at 16:39

score 0 · Answer 2 · edited May 23 '17 at 11:49

0

modifying the answer of this example : link

check that demo

css

.image_container {
    width: 50%;
    height: 300px;
    line-height: 300px;
    background: #eee;
    text-align: center;
    float:left;
}

.image_container img {
    vertical-align: middle;
}

Html

<div class="image_container">
     <image src="http://placehold.it/100x100/" height="100" width="100" alt=""/>
</div>
<div class="image_container">
     <image src="http://placehold.it/100x100/" height="100" width="100" alt=""/>
</div>

,also you can check that page

edited May 23 '17 at 11:49

Community

1
1

answered Jun 08 '14 at 11:02

ooopsoft

410
2
6

Thanks oops oft. Really appreciate your help , but now how can i add to the images a link ? Thanks again. :) – SoSkandalouS Jun 08 '14 at 15:56

Amir akbari · Answer 3 · 2014-06-08T10:38:08.497

-2

Set width for image container.

Set margin : 0 auto;

edited Jun 08 '14 at 10:38

answered Jun 08 '14 at 10:21

Amir akbari

52
4

right!! you can set width and margin for do that! ( doroste dooste man! ) – mostafaznv Jun 08 '14 at 10:36

Center 2 different images in css

3 Answers3