在一個正方形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中對齊一個字母

回答

相關問題