文章/答案/技术大牛

发布

社区首页 >问答首页 >中间的图像在桌子上？

问中间的图像在桌子上？
EN

Stack Overflow用户

提问于 2016-09-25 01:15:51

回答 2查看 4.3K关注 0票数 1

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

html

css

image

html-table

centering

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-09-25 02:12:05

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

首先，您的代码中有一些无效的语法-您打开了tbody，然后关闭了thead。同样，如前所述，我删除了您为图像colspan提供的无效tr。另一件事是，类名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>

因此，要在表格单元格中对图像进行居中--您不能这样做。这就是为什么必须在colspan元素上使用td元素的原因--这就是这里所需要的。

  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中居中，请参见下面的示例： a.为包含图像的th td设置特定宽度。使用margin: auto策略对其进行中心化。 table.dog .dog.head {宽度:400 img；} table.dog .dog.head img{显示:块；边距: 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>

票数 4

Stack Overflow用户

发布于 2016-09-25 01:42:10

将colspan添加到td而不是tr

因此，在这里移除colspan：

<tr colspan = "2">

然后在这里加上：

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

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39682518

复制

相似问题

问中间的图像在桌子上？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问中间的图像在桌子上？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问中间的图像在桌子上？
EN