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