Question

我正在进行CSS练习，我必须在不同标签内的框中对齐一些字母。然而，我正在努力使这个字母垂直对齐，我尝试使用vertical-align：middle。但它不起作用

这是我的代码：

<!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;

    }

Answer 1

这里有一个很棒的codepen回答这个问题：http://codepen.io/chriscoyier/pen/lpema

＆＃13;

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;
}

＆＃13;

<main>
  
  <div>
     I'm a block-level element with an unknown height, centered vertically within my parent.
  </div>
  
</main>

＆＃13;

你的.main元素需要是相对定位的元素，而它内部的元素是绝对的。然后按照上面的代码进行操作。

在方形CSS内对齐一个字母

1 个答案: