Question

我正在尝试创建一个4x4的焊盘网格。每个打击垫都应在其中间放置一个标题。

给出以下代码：

.pads {
	width: 320px;
	height: 320px;
}
.pad_container {
	float: left;
	width: 80px;
	height: 80px;
	background-color: black;
}
.pad {
	width: 100%;
	height: 100%;
	background-color: powderblue;
	transition: background-color 0.3s, width 0.1s, height 0.1s, margin 0.1s;
	cursor: pointer;	
}
.pad:hover {
	background-color: yellow;
}
.pad:active {
	background-color: orange;
	margin-top: 10%;
	margin-left: 10%;
	height: 80%;
	width: 80%;				
}

<!DOCTYPE HTML>
<html>
	<body>
		<div class="pads">
			<div class="pad_container">
				<div class="pad">
					<div class="pad_caption">Pad 1</div>
				</div>
			</div>
			<div class="pad_container">
				<div class="pad">Pad 2</div>
			</div>
			<div class="pad_container">
				<div class="pad">Pad 3</div>
			</div>
			<div class="pad_container">
				<div class="pad">Pad 4</div>
			</div>
			<div class="pad_container">
				<div class="pad">Pad 5</div>
			</div>
			<div class="pad_container">
				<div class="pad">Pad 6</div>
			</div>
			<div class="pad_container">
				<div class="pad">Pad 7</div>
			</div><div class="pad_container">
				<div class="pad">Pad 8</div>
			</div>
			<div class="pad_container">
				<div class="pad">Pad 9</div>
			</div>
			<div class="pad_container">
				<div class="pad">Pad 10</div>
			</div>
			<div class="pad_container">
				<div class="pad">Pad 11</div>
			</div>
			<div class="pad_container">
				<div class="pad">Pad 12</div>
			</div><div class="pad_container">
				<div class="pad">Pad 13</div>
			</div>
			<div class="pad_container">
				<div class="pad">Pad 14</div>
			</div>
			<div class="pad_container">
				<div class="pad">Pad 15</div>
			</div>
			<div class="pad_container">
				<div class="pad">Pad 16</div>
			</div>
		</div>
		<script>
		</script>
	</body>
</html>

如何将每个键盘标题放在每个键盘中间？

在更简单的情况下，我可以使用flexbox来做到这一点：

.test_pad {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 80px;
				height: 80px;
				background-color: powderblue;
}

<div class="test_pad">
  <div class="test_pad_text">Test pad</div>
</div>

但是在我的场景中，它不会居中，并且还会与其他CSS属性（如边距或宽度/高度尺寸等）混淆。

除了flexbox，我也愿意接受其他解决方案。

Answer 1

要使其垂直和水平居中，请在class="pad"之间添加一个新的div，名称为class="pad_caption"

.pad_caption{
  position:relative;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  text-align:center
}

下面是工作片段

.pads {
  width: 320px;
  height: 320px;
}

.pad_container {
  float: left;
  width: 80px;
  height: 80px;
  background-color: black;
}

.pad {
  width: 100%;
  height: 100%;
  background-color: powderblue;
  transition: background-color 0.3s, width 0.1s, height 0.1s, margin 0.1s;
  cursor: pointer;
}

.pad:hover {
  background-color: yellow;
}

.pad:active {
  background-color: orange;
  margin-top: 10%;
  margin-left: 10%;
  height: 80%;
  width: 80%;
}

.pad_caption {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center
}

<!DOCTYPE HTML>
<html>

<body>
  <div class="pads">
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 1</div>
      </div>
    </div>
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 2</div>
      </div>
    </div>
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 3</div>
      </div>
    </div>
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 4</div>
      </div>
    </div>
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 5</div>
      </div>
    </div>
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 6</div>
      </div>
    </div>
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 7</div>
      </div>
    </div>
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 8</div>
      </div>
    </div>
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 9</div>
      </div>
    </div>
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 10</div>
      </div>
    </div>
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 11</div>
      </div>
    </div>
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 12</div>
      </div>
    </div>
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 13</div>
      </div>
    </div>
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 14</div>
      </div>
    </div>
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 15</div>
      </div>
    </div>
    <div class="pad_container">
      <div class="pad">
        <div class="pad_caption">Pad 16</div>
      </div>
    </div>
  </div>
  <script>
  </script>
</body>

</html>

Answer 2

您需要在display: table中设置.pad-container，并在display: table-cell中将.pad与vertical-align: middle和text-align: center一起添加。

仅设置text-align并不能解决问题，因为您仍然缺少只有表格显示才能提供的垂直对齐方式。

此页面可能会帮助您进一步：https://www.w3.org/Style/Examples/007/center.en.html

.pads {
	width: 320px;
	height: 320px;
}
.pad_container {
	float: left;
	width: 80px;
	height: 80px;
	background-color: black;
    display: table;
}
.pad {
	width: 100%;
	height: 100%;
	background-color: powderblue;
	transition: background-color 0.3s, width 0.1s, height 0.1s, margin 0.1s;
	cursor: pointer;	
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.pad:hover {
	background-color: yellow;
}
.pad:active {
	background-color: orange;
	margin-top: 10%;
	margin-left: 10%;
	height: 80%;
	width: 80%;				
}

<!DOCTYPE HTML>
<html>
	<body>
		<div class="pads">
			<div class="pad_container">
				<div class="pad">
					<div class="pad_caption">Pad 1</div>
				</div>
			</div>
			<div class="pad_container">
				<div class="pad">Pad 2</div>
			</div>
			<div class="pad_container">
				<div class="pad">Pad 3</div>
			</div>
			<div class="pad_container">
				<div class="pad">Pad 4</div>
			</div>
			<div class="pad_container">
				<div class="pad">Pad 5</div>
			</div>
			<div class="pad_container">
				<div class="pad">Pad 6</div>
			</div>
			<div class="pad_container">
				<div class="pad">Pad 7</div>
			</div><div class="pad_container">
				<div class="pad">Pad 8</div>
			</div>
			<div class="pad_container">
				<div class="pad">Pad 9</div>
			</div>
			<div class="pad_container">
				<div class="pad">Pad 10</div>
			</div>
			<div class="pad_container">
				<div class="pad">Pad 11</div>
			</div>
			<div class="pad_container">
				<div class="pad">Pad 12</div>
			</div><div class="pad_container">
				<div class="pad">Pad 13</div>
			</div>
			<div class="pad_container">
				<div class="pad">Pad 14</div>
			</div>
			<div class="pad_container">
				<div class="pad">Pad 15</div>
			</div>
			<div class="pad_container">
				<div class="pad">Pad 16</div>
			</div>
		</div>
		<script>
		</script>
	</body>
</html>

在div内居中放置文本而不影响页边距或尺寸？

2 个答案: