使用邊框的正方形CSS框中居中的文本？

我想創建一個CSS框作爲'徽標'片或者你有什麼，以頁面中間的另一個div爲中心 - 我使用引導程序3，將div放入容器流體中我想要的全寬頁面，並開始了它的標誌部分。使用邊框的正方形CSS框中居中的文本？

我的代碼如下

.logo{ 

    width: 50rem; 
    height: 50rem; 
    margin: 0 auto; 
    text-align: center; 
    font-size: 15em; 
    font-weight: 100; 
    font-family: 'Raleway' , sans-serif; 
    color: white; 
    border: 14px solid black; 
}

無論出於何種原因，這並不能使一個平方 - 這是基於字體大小，我假設，但它似乎是字體較大它只是在盒子外溢出來 - 所以我不能在我的生活中弄清楚如何既垂直對齊這個文本，又在文本週圍創建一個完美的正方形。任何有識之士將不勝感激 - 謝謝！

來源

2016-11-19 Zachary Weaver

，你不能使用像素寬度/高度...？ – Stuart

我在想那個，但是我想我聽說過會打破潛在的響應能力？這是不是真的？ –

我有一個容器div，基本上可以是你的身體。大小可以調整。

然後是標識類。這個類有相對寬度。在示例中：其父級（容器類）的50％

沒有固定高度的框，因此它的高度基於文本。

該盒子位於中心槽的絕對定位並再次轉換。

.container { 
 
    position: relative; 
 
    width: 500px; 
 
    height: 500px; 
 
    background-color: gray; 
 
} 
 
.logo { 
 
    position: relative; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 50%; 
 
    transform: translate(-50%, -50%); 
 
    text-align: center; 
 
    font-size: 3em; 
 
    font-weight: 100; 
 
    font-family: 'Raleway', sans-serif; 
 
    color: white; 
 
    box-sizing: border-box; 
 
    border: 14px solid black; 
 
}

<div class="container"> 
 
    <div class="logo"> 
 
    Some random text goes here? 
 
    </div> 
 
</div>

來源

2016-11-19 16:17:07 Persijn

使用邊框的正方形CSS框中居中的文本？

回答

相關問題