使用一个div在表格单元格中定位圆 [英] Positioning circle in table cell using one div

问题描述

我是新的html和css和有一个有趣的问题。我想在一个表格单元格内放置一个高度和宽度为40px的红色圆圈，并保持这个高度和宽度，无论表格单元格的高度或宽度如何。所以它看起来如下：

I am new to html and css and have an interesting problem. I want to position a red circle of height and width 40px within a table cell, and maintain this height and width no matter what the table cell height or width. So it would look as follows:

圆始终居中并且大小相同，单元格的其余部分作为空格。我也想这样做，如果可能，只使用一个css类，如下所示：

With the circle always centered and the same size and the rest of the cell as whitespace. I also want to do this, if possible, using just one css class like below:

   td.circle {
        background: #f00;
        width: 40px;
        height: 40px;
        right:50%;
        bottom: 50%;
        vertical-align: middle;
        transform: translate (50%,50%);
        border-radius: 50%;
    }

目前，我已经使用和宽度或高度，是否有办法阻止这种情况？

At the moment, the code I have expands the circles with and height with the width or height of the cell, is there a way to stop this happening?

推荐答案

如果你不能把div td 并使用它作为你的圈子，然后它听起来像一个伪元素的工作。

If you can't put a div in the td and use that as your circle then it sounds like a job for a pseudo-element.

table {
  width: 80%;
  margin: 1em auto;
}
td {
  border: 1px solid grey;
}
td.circle:before {
  content: attr(data-char);
  display: block;
  background: #f00;
  width: 40px;
  height: 40px;
  line-height:40px;
  text-align:center;
  vertical-align: middle;
  border-radius: 50%;
  margin:0 auto;
}

<table>
  <tr>
    <td class="circle" data-char="H"></td>
    <td class="circle" data-char="I"></td>
    <td class="circle" data-char="J"></td>
    <td class="circle" data-char="K"></td>
  </tr>
</table>

第二个解决方案

不能诚实地说，我喜欢这个在实际背景图片它必须是纯CSS，我们不允许 td 中的任何元素，我们可以使用受限制的圆形径向渐变。

Can't honestly say I prefer this over an actual background image but if it has to be pure CSS and we aren't allowed any elements inside the td we can use a restricted circular radial gradient.

.circle {
  background-image:
    -webkit-radial-gradient(
      circle,
      red, red 20px, transparent 20px
    );
  background-image:
    radial-gradient(
      circle,
      red, red 20px, transparent 20px
    );
border:1px solid grey;
}

table {
  width: 80%;
  margin: 1em auto;
  table-layout: fixed;
  text-align: center;
}

td {
  height: 40px;
}

<table>
  <tr>
    <td class="circle">1</td>
    <td class="circle">2</td>
    <td class="circle">3</td>
    <td class="circle">4</td>
  </tr>
</table>

这篇关于使用一个div在表格单元格中定位圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！