表格中的中心图像？答案

【问题标题】：Center image in table?表格中的中心图像？
【发布时间】：2017-02-02 14:20:50
【问题描述】：

我曾尝试在 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 属性似乎根本不会影响此图像行。

【问题讨论】：

colspan 是 <td>s 上的属性，而不是 <tr>s。
图像水平居中有多重要？对于 2 列的表，它可能会自动执行此操作，但如果我要向表中添加更多列怎么办？

标签： html css image html-table centering

【解决方案1】：

将 colspan 添加到 td 而不是 tr

所以在这里删除 colspan ：

<tr colspan = "2">

并在此处添加：

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

【讨论】：

CSS 类名不能包含.，据我所知。即使他们可以，使用它也将是一个真的坏主意。
是的，但问题是关于别的事情，我只是复制他的代码来解决他提到的问题！

【解决方案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>

所以要使图像在表格单元格中居中 - 你不能这样做。这就是为什么你必须在 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>

【讨论】：