Question

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

这是现在的代码。 HTML或CSS的代码中没有多少：

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

它已经垂直居中，因为单元格是图像的大小。但是如何让它水平居中以使它看起来更好？ colspan属性似乎根本不会影响这个图像行。

Answer 1

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

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

＆＃13;

    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;
    }

＆＃13;

    <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>

＆＃13;

因此，要将图像置于表格单元格的中心 - 您无法做到这一点。这就是为什么你必须在colspan元素上使用td的原因 - 这就是你需要的所有内容。

＆＃13;

    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;
    }

＆＃13;

    <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>

＆＃13;

如果需要知道如何以td为中心，请参阅此示例：

一个。为包含图像的td设置特定宽度

湾使用margin: auto策略将其置于中心位置。
```
table.dog .dog.head {
  width: 400px;  
}
table.dog .dog.head img{
  display: block;
  margin: auto;
}
```

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

将colspan添加到td而不是tr

所以在这里删除colspan：

<tr colspan = "2">

并在此处添加：

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

表格中的中心图片？

2 个答案: