我正在做一个 CSS 练习，我必须让一些字母在不同标签内的框中对齐。但是我在垂直对齐字母方面遇到了困难，我尝试使用垂直对齐:中间。但是没用
这是我的代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Hola</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div id="A" class="cuadrado">A</div>
<span id="B" class="cuadrado">B</span>
<p id="C" class="cuadrado">C</p>
<h1 id="D" class="cuadrado">D</h1>
<H2 id="E" class="cuadrado">E</H2>
<p id="F" class="cuadrado">F</p>
<p id="G" class="cuadrado">G</p>
</div>
</body>
</html>
CSS:
.main{
position: absolute;
bottom: 0;
left: 0;
}
.cuadrado{
/*display: block;*/
width: 30px;
height: 30px;
color:white;
font-size: 16px;
display:inline-block;
border-width: 2px;
border-style: solid;
border-color: black;
text-align: center;
vertical-align: middle;
}
#A{
background: red;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#B{
background: orange;
}
#C{
background: yellow;
}
#D{
background: black;
}
#E{
background: green;
}
#F{
background: blue;
}
#G{
background: purple;
}
最佳答案
这里有一个很棒的代码笔可以回答这个问题:http://codepen.io/chriscoyier/pen/lpema
body {
background: #f06d06;
font-size: 80%;
}
main {
background: white;
height: 300px;
margin: 20px;
width: 300px;
position: relative;
resize: vertical;
overflow: auto;
}
main div {
position: absolute;
top: 50%;
left: 20px;
right: 20px;
background: black;
color: white;
padding: 20px;
transform: translateY(-50%);
resize: vertical;
overflow: auto;
}<main>
<div>
I'm a block-level element with an unknown height, centered vertically within my parent.
</div>
</main>您的 .main 元素需要是相对定位的元素，并且其中的元素是 abolute。然后按照上面的代码，它应该可以工作。
关于html - 在正方形 CSS 中对齐字母，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31332304/