CODEWITHSUNDEEP
htmlimagecss
kleeman7
kleeman7

Reputation: 33

Left align, and center an inline image inside a container

What I am trying to do is have an image centered, and then another image inline with it that is aligned to the left. I have tried searching and have found nothing thats works right. Any suggestions will be greatly appreciated.

HTML

<div class="container">
  <header>
   <div>
   <a href="index.html">
   <img src="left.png" border="0" width="174" height="350" />
   <img class="center" src="center.png" border="0" width="700" height="350" />
   </a>
   </div>

CSS

html 
{
    min-height:100%;
}
body 
{
    background-color: #9CF;
    background-repeat: no-repeat;
}
body,td,th 
{
    font-size: large;
    margin: 3% 5% 3% 5%;
}
.container 
{
    background-color: rgba(0,0,0,0.4);
    padding: 6px;
}
.linkbg 
{
    background-color: #000000;
    color: #FFF; 
    text-align:center;
}
.dashboard
{
    text-align:right;
}
ul
{
    background-color: #0099CC;
    width:100%;
    text-align:center;
    list-style-type:none;
    margin:0;
    padding:0;
    padding-top:6px;
    padding-bottom:6px;
    opacity:0.7;
}
li
{
    display:inline;
}
.nava:link,.nava:visited
{
    font-weight:bold;
    color:black;
    background-color:##0099CC;
    text-align:center;
    padding:6px;
    text-decoration:none;
    text-transform:uppercase;
}
.nava:hover,.nava:active
{
    background-color: #00FFFF;
}
img 
{
    max-width: 100%;
    height: auto;
    width: auto\9;
}

.center
{
    display:inline-block;
    margin-left:auto; 
    margin-right:auto;
}

Upvotes: 3

Views: 61137

Answers (4)

user973257
user973257

Reputation:

this is the way I makes a picture load in the middle of a page

<img src="..." alt=".." style="margin:0px auto;display:block" />

Upvotes: 0

Mohammed Raqeeb
Mohammed Raqeeb

Reputation: 220

you can try using the below given technique

<img style="margin:0px auto;display:block" src="Image URL Here"/>

for a full review you can check the below link http://bloggingfear.blogspot.in/2012/11/how-to-center-image-using-html-5-code.html

Upvotes: 11

Brian Stephens
Brian Stephens

Reputation: 5261

Here's another way to do this:

  • Add text-align: center; to the container.
  • Apply position: absolute; left: 0; to the "left" image (you should add a class for it).
  • You can remove all the CSS for .container img.

The left image will not affect the position of the other image because it's absolutely positioned. The other image will be centered exactly in the container.

Upvotes: 3

wakqasahmed
wakqasahmed

Reputation: 2089

You have problem in this code

img 
{
    max-width: 100%;
    height: auto;
    width: auto\9;
}

just change this with 

img 
{
    max-width: 100%;
    height: auto;
    width: auto;
}

moreover the style you want to apply on it can simply be added without complications that you added.

Here is the demo: http://jsfiddle.net/mastermindw/9qAL6/7/

Upvotes: 1

Related Questions