table 中的中心图像？

Question

我试过在 CSS 代码中使用垂直对齐，我试过在内联 CSS 中使用对齐。但我无法让图像正确居中。如果只有水平对齐属性.

这是目前的代码。 HTML 或 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>

它已经垂直居中，因为单元格是图像的大小。但是我怎样才能让它水平居中，这样看起来更漂亮呢？ colspan 属性似乎根本不会影响此图像行。

Answer 1

将 colspan 添加到 td 而不是 tr

所以在这里删除 colspan :

<tr colspan = "2">

并在此处添加：

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

Answer 2

下面是我对您的代码所做的一些事情：

首先，您的代码中存在一些无效语法 - 您打开了 tbody，然后关闭了 thead。同样如前所述，我删除了您为图像 tr 提供的无效 colspan。另一件事是类名 dog.head 中有一个点，这很棘手。首先我解决了这些问题。

    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>

所以要使图像在 table 个单元格中居中 - 你不能那样做。这就是为什么你必须在 td 元素上使用 colspan - 这就是你在这里所需要的。

    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>

如果还需要知道如何在 td 中居中，请看这个例子：

一个。为包含图像
的 td 设置特定宽度
b。使用 margin: auto 策略使其居中。
```
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>

table 中的中心图像？

Center image in table?

html

css

html-table

image

centering