CODEWITHSUNDEEP
htmlcssimageclasscentering
AlaskanDownSouth
AlaskanDownSouth

Reputation: 1

Images will not center with CSS

Just turned in a programming assignment for my class and was talking to the teacher when he told me I was not allowed to use to center my images. He said I had to use id and class and then center in the stylesheet/CSS. This makes no sense to me, when I use the inline it works perfectly but I have tried everything I know to center in the stylesheet and nothing works. I have attached 2 examples from my code:

This works perfectly on centering image but the professor says it is not allowed:

<h5>Back View</h5>
    <div style="text-align: center"/>
    <a href="BackViewT-Shirt.html" target="_blank">
      <img src="http://i1293.photobucket.com/albums/b581/AlaskanAdventureApparel/photo1_zpsff666fce.jpg" height="400" width="300" alt="Back View Alaskan Adventure T-Shirt"/>
    </a>

Then tried using an id and class and nothing has worked, trying to center both the heading and the image:

HTML:

<h5 class="center">Back View</h5>
    <a href="BackViewT-Shirt.html" target="_blank">
      <img src="http://i1293.photobucket.com/albums/b581/AlaskanAdventureApparel/photo1_zpsff666fce.jpg" height="400" width="300" alt="Back View Alaskan Adventure T-Shirt"/>
    </a>

StyleSheet:

.center {
text.align: center;
}

Upvotes: 0

Views: 83

Answers (3)

BrandonH
BrandonH

Reputation: 1

Your stylesheet also has a typo in it.

.center {
text.align: center;
}

Should be

.center {
text-align:center;
}

Upvotes: 0

Lesly Revenge
Lesly Revenge

Reputation: 922

.center {
   text-align: center;
 }

you used text.align instead of text-align

Upvotes: 0

Mister Epic
Mister Epic

Reputation: 16743

Your markup is wrong, you dropped the container div:

<h5>Back View</h5>
<div class="center">
 <a href="BackViewT-Shirt.html" target="_blank">
  <img src="http://i1293.photobucket.com/albums/b581/AlaskanAdventureApparel/photo1_zpsff666fce.jpg" height="400" width="300" alt="Back View Alaskan Adventure T-Shirt"/>
 </a>
</div>

Also, you CSS has a typo (ALWAYS VALIDATE!)

.center {
   text-align: center;
}

Here, the div aligns its inline contents.

As an aside, you could also do something like:

a{
  display:block;
  width:200px; /* This should be the width of the image */
  margin:0 auto; /* This cryptic statement will center block-level elements */
 }

Upvotes: 4

Related Questions