Question

无论表格单元格的宽度如何，我都希望将图像作为背景和中心文本。到目前为止，我有以下内容：

例如，第一张图片是正确的，但是c是不正确的，因为我希望绿色圆圈以单元格的x轴为中心，文本以此圆圈的中心为中心。

我的css如下：

   bgCircle {
      display: inline-block;
      width: 40px;
      height: 35px;
      transform: translate (50%, 50%);
      vertical-align: middle;
      background-image: url("test.png");
      background-repeat: no-repeat;
      text-align: center;
    }

谁能看到我出错的地方？

Answer 1

使用：

function SearchRecords(vSearch) {
  //your codes
  return false;
}

或为左侧和上方指定单独的值：

background-position: center;

Answer 2

你可以做很多事情。我给你简单的方法。看看这里是解决方案：

您还可以在JSFIDDLE

中看到

＆＃13;

all.rnd.df <- lapply(out, "[[", "rnd")
capture.output(all.rnd.df,file="all.rnd.df.txt")

all.rnd.df.bc <- lapply(out, "[[", "bc")
capture.output(all.rnd.df.bc,file="all.rnd.df.bc.txt")

all.triang <- lapply(out, "[[", "ave") 
capture.output(all.triang,file="all.triang.txt")

＆＃13;

.circle {
  width: 50px;
  height: 50px;
  border-radius: 250px;
  font-size: 25px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  background: red;
  float: left;
  margin-right: 10px;
}

＆＃13;

Answer 3

使用line-height使中心正确。

.bgCircle {
    background-image: url("http://i.stack.imgur.com/qkIMm.png");
    background-size: 100% auto;
    color: #fff;
    text-align: center;
    display:inline-block;
    height: 50px;
    line-height: 50px;
    width: 50px;
}

<div class="main">
  <div class="bgCircle">a</div>
  <div class="bgCircle">b</div>
  <div class="bgCircle">c</div>
</div>

Answer 4

将一个项目放在另一个项目中的简单方法就是这样：

.container {
	/* background-image: url('your background'); */
	position: relative;
	width: 200px;
	height: 200px;
	background-color: #808;
	border-radius: 50%;
}
.content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

<div class="container">
    <div class="content">A</div>
</div>

所以，在你的情况下，试试这个：

.table {
    width: 100%;
    border: 1px solid #000;
    border-collapse: collapse;
}
.container {
    position: relative;
    height: 40px;
    border: 1px solid #000;
}
.container::before {
    content: "";
    /* background-image: url('your background'); */
    position: absolute;
    z-index: 1;
    background-color: #808;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.content {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<table class="table">
    <tr>
        <td class="container">
            <div class="content">A</div>
        </td>
        <td class="container">
            <div class="content">BB</div>
        </td>
        <td class="container">
            <div class="content">C C<br>C C</div>
        </td>
        <td class="container">
            <div class="content">D D</div>
        </td>
    </tr>
</table>

Answer 5

圈出图像的技巧是

img-circle {
    border-radius: 50%;
}

如果您想详细了解这一点，请访问

http://www.abeautifulsite.net/how-to-make-rounded-images-with-css/

并将文本置于中心

CSS Center text (Horizontal and Vertical) inside a DIV block

如何使用css将表格单元格中的圆和文本居中

5 个答案: