SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question center two images in css side by side

    center two images in css side by side ?

    center image.jpg

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style>




    ?





    </style>
    </head>
    <body>


    ?



    </body>
    </html>

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,742
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    simply create a wrapper for both elements ( in this case the images, and give them display:inline-block; and vertical-align:middle; )


    for example:
    Code:
    <html>
    	<head>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<meta name="viewport" content="width=device-width">
    		<style type="text/css">
    			.img-wrap, h1{
    				text-align: center;
    			
    			}
    			.img-wrap a img{
     					display:block;
    			}
    			.img-wrap > a{
     					display:inline-block;
     					vertical-align: middle;
     					border: 1px solid #555
    			}
    		</style>
    	</head>
    	<body>
    <h1>The Headline!</h1>
    <div class="img-wrap">
    		<a href="#"><img src="#" height="150" width="150">Wedddings</a>
    		<a href="#"><img src="#" height="150" width="150">Website</a>
     </div>
    	</body>
    </html>
    hope that helps

  3. #3
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    easier

    CSS


    img.logo
    {
    display:inline-block;
    margin-left:auto;
    margin-right:auto;
    width:400px;
    height:312px;
    }
    #twoimages{text-align:center;}

    HTML

    <div id="twoimages">

    <img class="logo" src="images/old.jpg" alt="">
    <img class="logo" src="images/old.jpg" alt="">

    </div>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •