在一个正方形CSS中对齐一个字母

我正在进行一个CSS练习，在该练习中，我必须使不同标记中的一些字母对齐。不过，我正在努力垂直对齐这个字母，我尝试过vertical-align：middle。但是，这是行不通的在一个正方形CSS中对齐一个字母

here's我的代码：

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

    }

来源

2015-07-10 Pablo Estrada

为什么这些字母都是不同类型的标签，div，span，p等等？ – Stickers

这是一个练习，其实没有目的。只是要知道如何处理不同的情况。 –

有一个伟大的codepen回答这个问题在这里：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元素需要是相对定位的元素，而其中的元素是绝对的。然后按照上面的代码，它应该工作。

来源

2015-07-10 04:24:22

在一个正方形CSS中对齐一个字母

回答

相关问题