CODEWITHSUNDEEP
htmlcssimagehtml-tablecentering
Caters
Caters

Reputation: 147

Center image in table?

I have tried using vertical-align in CSS code, I have tried using align in inline CSS. But I just can't get the image to center properly. If only there were a horizontal-align property.

Here is the code as of right now. There isn't much in the code for either the HTML or the CSS:

body {
  background-color: violet
}
table.dog {
  background-color: SteelBlue;
}
table.cat {
  background-color: #FF91A4;
}
table.puppy {
  background-color: #CBA135;
}
table.kitten {
  background-color: #FF8243;
}
table.rodent {
  background-color: #6C2E1F;
}
table.lizard {
  background-color: #F8DE7E;
}
table.snake {
  background-color: #D70000;
}
table.turtle {
  background-color: #355E3B;
}
table.alligator {
  background-color: #171717;
}
table.crocodile {
  background-color: #556B2F;
}
table.bird {
  background-color: skyblue;
}
table.dog.female.goldenretriever {
  background-color: #0077BE;
}
table.dog.male.greatdane {
  background-color: #1C39BB;
}
table.dog.female.poodle {
  background-color: #007BBB;
}
<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="Style.css">
</head>

<body>
  <h1>Dogs</h1>
  <h2>Sophie</h2>
  <p></p>
  <table class="dog female goldenretriever" border="5" align="right">
    <thead>
      <th colspan="2">Sophie</th>
      <tbody>
        <tr colspan="2">
          <td class="dog.head">
            <img src="https://tse1.mm.bing.net/th?&id=OIP.M241ab28f81f46d4c117cb21c6bd6d60co0&w=242&h=211&c=0&pid=1.9&rs=0&p=0&r=0">
          </td>
    </thead>
    <tbody>
      </tr>
      <tr>
        <td>
          Breed
        </td>
        <td>
          Golden Retriever
        </td>
      </tr>
      <tr>
        <td>
          Gender
        </td>
        <td>
          Female
        </td>
      </tr>
      <tr>
        <td>
          No. of Puppies
        </td>
        <td>
          8
        </td>
      </tr>
      <tr>
        <td>Times pregnant</td>
        <td>
          1
        </td>
      </tr>
      <tr>
        <td>
          Health
        </td>
        <td>
          Healthy
        </td>
      </tr>
      <tr>
        <td>
          Age
        </td>
        <td>
          2 years
        </td>
      </tr>
    </tbody>
  </table>
</body>

It is already vertically centered since the cell is the size of the image. But how do I get it horizontally centered so that it looks nicer? The colspan property doesn't seem to affect this image row at all.

Upvotes: 1

Views: 4754

Answers (2)

kukkuz
kukkuz

Reputation: 42352

So here are some things that have I have done to your code:

  1. First of all, there is some invalid syntax in your code- you opened tbody and then closed thead. Also as previously noted, I removed the invalid colspan that you were giving for the image tr. Another thing is that there is a dot in the classname dog.head which is tricky. First I fixed these issues.

        body {
      background-color: violet
    }
    table.dog {
      background-color: SteelBlue;
    }
    table.cat {
      background-color: #FF91A4;
    }
    table.puppy {
      background-color: #CBA135;
    }
    table.kitten {
      background-color: #FF8243;
    }
    table.rodent {
      background-color: #6C2E1F;
    }
    table.lizard {
      background-color: #F8DE7E;
    }
    table.snake {
      background-color: #D70000;
    }
    table.turtle {
      background-color: #355E3B;
    }
    table.alligator {
      background-color: #171717;
    }
    table.crocodile {
      background-color: #556B2F;
    }
    table.bird {
      background-color: skyblue;
    }
    table.dog.female.goldenretriever {
      background-color: #0077BE;
    }
    table.dog.male.greatdane {
      background-color: #1C39BB;
    }
    table.dog.female.poodle {
      background-color: #007BBB;
    }
        <body>
      <h1>Dogs</h1>
      <h2>Sophie</h2>
      <p></p>
      <table class="dog female goldenretriever" border="5" align="right">
        <thead>
          <th colspan="2">Sophie</th>
        </thead>
        <tbody>
          <tr>
            <td class="dog head">
              <img src="https://tse1.mm.bing.net/th?&id=OIP.M241ab28f81f46d4c117cb21c6bd6d60co0&w=242&h=211&c=0&pid=1.9&rs=0&p=0&r=0">
            </td>
          </tr>
          <tr>
            <td>
              Breed
            </td>
            <td>
              Golden Retriever
            </td>
          </tr>
          <tr>
            <td>
              Gender
            </td>
            <td>
              Female
            </td>
          </tr>
          <tr>
            <td>
              No. of Puppies
            </td>
            <td>
              8
            </td>
          </tr>
          <tr>
            <td>Times pregnant</td>
            <td>
              1
            </td>
          </tr>
          <tr>
            <td>
              Health
            </td>
            <td>
              Healthy
            </td>
          </tr>
          <tr>
            <td>
              Age
            </td>
            <td>
              2 years
            </td>
          </tr>
        </tbody>
      </table>
    </body>

  2. So to center the image across table cells- you can't do that. That's why you have to use colspan on the td element- and that's all you need here.

        body {
      background-color: violet
    }
    table.dog {
      background-color: SteelBlue;
    }
    table.cat {
      background-color: #FF91A4;
    }
    table.puppy {
      background-color: #CBA135;
    }
    table.kitten {
      background-color: #FF8243;
    }
    table.rodent {
      background-color: #6C2E1F;
    }
    table.lizard {
      background-color: #F8DE7E;
    }
    table.snake {
      background-color: #D70000;
    }
    table.turtle {
      background-color: #355E3B;
    }
    table.alligator {
      background-color: #171717;
    }
    table.crocodile {
      background-color: #556B2F;
    }
    table.bird {
      background-color: skyblue;
    }
    table.dog.female.goldenretriever {
      background-color: #0077BE;
    }
    table.dog.male.greatdane {
      background-color: #1C39BB;
    }
    table.dog.female.poodle {
      background-color: #007BBB;
    }
        <body>
      <h1>Dogs</h1>
      <h2>Sophie</h2>
      <p></p>
      <table class="dog female goldenretriever" border="5" align="right">
        <thead>
          <th colspan="2">Sophie</th>
        </thead>
        <tbody>
          <tr>
            <td colspan="2" class="dog head">
              <img src="https://tse1.mm.bing.net/th?&id=OIP.M241ab28f81f46d4c117cb21c6bd6d60co0&w=242&h=211&c=0&pid=1.9&rs=0&p=0&r=0">
            </td>
          </tr>
          <tr>
            <td>
              Breed
            </td>
            <td>
              Golden Retriever
            </td>
          </tr>
          <tr>
            <td>
              Gender
            </td>
            <td>
              Female
            </td>
          </tr>
          <tr>
            <td>
              No. of Puppies
            </td>
            <td>
              8
            </td>
          </tr>
          <tr>
            <td>Times pregnant</td>
            <td>
              1
            </td>
          </tr>
          <tr>
            <td>
              Health
            </td>
            <td>
              Healthy
            </td>
          </tr>
          <tr>
            <td>
              Age
            </td>
            <td>
              2 years
            </td>
          </tr>
        </tbody>
      </table>
    </body>

  3. Still if need to know how to center in a td, see this example:

    a. Set a specific width for th td containing the image

    b. Use margin: auto strategy to center it.

    table.dog .dog.head {
  width: 400px;  
}
table.dog .dog.head img{
  display: block;
  margin: auto;
}


body {
  background-color: violet
}
table.dog {
  background-color: SteelBlue;
}
table.cat {
  background-color: #FF91A4;
}
table.puppy {
  background-color: #CBA135;
}
table.kitten {
  background-color: #FF8243;
}
table.rodent {
  background-color: #6C2E1F;
}
table.lizard {
  background-color: #F8DE7E;
}
table.snake {
  background-color: #D70000;
}
table.turtle {
  background-color: #355E3B;
}
table.alligator {
  background-color: #171717;
}
table.crocodile {
  background-color: #556B2F;
}
table.bird {
  background-color: skyblue;
}
table.dog.female.goldenretriever {
  background-color: #0077BE;
}
table.dog.male.greatdane {
  background-color: #1C39BB;
}
table.dog.female.poodle {
  background-color: #007BBB;
}
/* centering for illustration*/
table.dog .dog.head {
  width: 400px;  
}
table.dog .dog.head img{
  display: block;
  margin: auto;
}
<body>
  <h1>Dogs</h1>
  <h2>Sophie</h2>
  <p></p>
  <table class="dog female goldenretriever" border="5" align="right">
    <thead>
      <th colspan="2">Sophie</th>
    </thead>
    <tbody>
      <tr>
        <td colspan="2" class="dog head">
          <img src="https://tse1.mm.bing.net/th?&id=OIP.M241ab28f81f46d4c117cb21c6bd6d60co0&w=242&h=211&c=0&pid=1.9&rs=0&p=0&r=0">
        </td>
      </tr>
      <tr>
        <td>
          Breed
        </td>
        <td>
          Golden Retriever
        </td>
      </tr>
      <tr>
        <td>
          Gender
        </td>
        <td>
          Female
        </td>
      </tr>
      <tr>
        <td>
          No. of Puppies
        </td>
        <td>
          8
        </td>
      </tr>
      <tr>
        <td>Times pregnant</td>
        <td>
          1
        </td>
      </tr>
      <tr>
        <td>
          Health
        </td>
        <td>
          Healthy
        </td>
      </tr>
      <tr>
        <td>
          Age
        </td>
        <td>
          2 years
        </td>
      </tr>
    </tbody>
  </table>
</body>

Upvotes: 4

Emad Dehnavi
Emad Dehnavi

Reputation: 3441

add colspan to td instead of tr

so remove colspan here :

<tr colspan = "2">

and add it here : 

<td class = "dog.head" colspan = "2">

Upvotes: -1

Related Questions