CODEWITHSUNDEEP
htmlcssimage
Fluxcapacitor
Fluxcapacitor

Reputation: 393

how do I align an image to center?

I'm doing a simple test website to practice html. These are the image align variants I've tried that haven't worked:

 <style type="text/css">
      img {
      image-align: center;
      border: 2px dashed gray;
      height: 200px;
      width:  140px;

      }
 </style>

 <img src="images/htmlphoto2.jpg" alt="profile pic of man wearing tie" align="middle"/>

 <style type="text\css">
     img {
       margin-right: auto;
       margin-left: auto;
     }


  <style type="text\css"> 
     img {
       display: block;
       margin: 0 auto;
     }
  </style>

full code: I'm using a combination of internal style sheet and inline styling for practice.

 <!-- autobiobrevio -->
 <!-- 8/21/14 11:00 - 11:50 Structure completed -->
 <!--8/23/14 10:00 pm - Alignment -->

 <!DOCTYPE html>

 <html>
 <head>
 <meta charset="utf-8" />
 <title>biosite</title>
    <style type="text/css">
        h1  {
          text-align: center;
        }

       img {
          image-align: center;
          border: 2px dashed gray;
          height: 200px;
          width:  140px;
       }

    </style>

 </head>

 <body>

 <h1> Steve's Autobiobrevio </h1>

<img src="images/htmlphoto2.jpg" alt="profile pic of guy wearing tie" />
<br>
<br>

  <table>
   <tr>
     <td>
       <ul> <span style="font-family: Impact"> De moi </span>
        <li> Born October 1972 </li>
        <li> CT </li>
        <li> blah blah blah </li>
       </ul>
    </td>

     <td>
       <ul> <span style="font-family: Impact"> Hobbies </span>  
        <li> Guitar </li>
        <li> HTML </li>
        <li> Hiking </li>
       </ul>
     </td>

    <td>
      <ul>  <span style="font-family: Impact"> Fav Guitarists </span>
       <li> David Gilmour </li>
       <li> Muddy Waters </li>
       <li> Dave Navarro </li>
      </ul>
    </td>
 </table>

  <div style="width: 800px; height: 100px; background-color: red" </div>


 </body>
 </html>

Thank you.

Upvotes: 0

Views: 7342

Answers (5)

Farshad
Farshad

Reputation: 1485

Try to add display:block to your

HTML :

<img src="http://farshadajdar.com/imgeditor/tweety.png" class="displayed" alt="profile pic of man wearing tie" align="middle"/>

CSS :

img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto; 
}

JSFIDDLE DEMO

Upvotes: 2

C Williams
C Williams

Reputation: 139

You can also try: 

<style type="text/css">
    img {
    position:absolute;
    border:2px dashed gray;
    height:200px;
    width:140px;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0; 
    }
 </style>

Upvotes: 0

Srinivas08
Srinivas08

Reputation: 1062

Try this,It Will definately work..

Image Code :

<img src="http://farshadajdar.com/imgeditor/tweety.png" class="displayed" alt="profile pic of man wearing tie"/>

Here goes the css :

<style type=text/css>
img.displayed {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
</style>

Hop it will work for you too..

Upvotes: 0

Fluxcapacitor
Fluxcapacitor

Reputation: 393

I solved my problem by using the inline style tag:

But why didn't the inline style sheet work?

Upvotes: -1

user3968801
user3968801

Reputation:

Can you provide the full html code?Anyway First remove align="middle " and try this even if it's similar to yours

img{
  display:block;
  margin:auto;

     }

Upvotes: 1

Related Questions