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

时间:2019-06-12 13:08:59

标签: css

我正在尝试创建一个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,我也愿意接受其他解决方案。

2 个答案:

答案 0 :(得分:0)

要使其垂直和水平居中,请在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>

答案 1 :(得分:0)

您需要在display: table中设置.pad-container,并在display: table-cell中将.padvertical-align: middletext-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>