如何創建1個字符平方

-1

是否有一個好方法可以製作一個正方形，並且該字符在中間對齊，中間對齊。如何創建1個字符平方

就像一個圍繞'+'字符（對於「好」，紅色圍繞' - '對於「壞」或藍色圍繞'我'對於「信息」）的小綠框。

我想問題的一部分是在大多數瀏覽器/操作系統中使用相同大小的字體。另一個如何填充它，使其正方形，並且角色居中。

嘗試設置width，height並line-height到1 em，但「+」結束了位斷，並用在鉻和Firefox不同量，代替「+」與「重加號」 U + 2795由以下瀏覽器之間的差異，但猜測它可能會使操作系統之間的差異更大。

目前我有

.pros_icon 
 
{ 
 
\t float: left; 
 
\t text-align: center; 
 
\t height: 1em; 
 
\t height: calc(1em + 2px); 
 
\t width: 1em; 
 
\t width: calc(1em + 2px); 
 
\t font-size: 20px; 
 
\t line-height: 1em; 
 
\t font-weight: bold; 
 

 
\t border: solid black 1px; 
 
\t color: white; 
 
\t background: green; 
 
}

<span class="pros_icon"> ➕ </span>

（或者也許我應該只使用SVG圖像）

來源

2016-07-21 Puggan Se

你可以嘗試高度或寬度自動。 – Jainam

你可以刪除float:left和line-height: 1em;和使用填充

.pros_icon 
 
{ 
 
    //float: left; 
 
    text-align: center; 
 
    height: 1em; 
 
    height: calc(1em + 2px); 
 
    width: 1em; 
 
    width: calc(1em + 2px); 
 
    font-size: 20px; 
 
    //line-height: 1em; 
 
    font-weight: bold; 
 

 
    border: solid black 1px; 
 
    color: white; 
 
    background: green; 
 
    padding:5px; 
 
}

<span class="pros_icon"> ➕ </span>

來源

2016-07-21 11:26:27

我修改了我的答案。這下面應該是固定高度/寬度的最小代碼量。如果你具有不同的高度/寬度的非對稱的和/或奇形符號，就可以玩的行高垂直居中它

#char-box { 
 
    width:40px; 
 
    height:40px; 
 
    background-color:lightblue; 
 
    line-height:40px; 
 
    text-align: center; 
 
}

<div id="char-box">O</div>

來源

2016-07-21 11:26:45 tech4242

結束爲19x29px，而不是一個方形 –

@PugganSe我不得不同意你的看法。頂部/底部的填充是不必要的：https://jsfiddle.net/n4gr9tqq/4/這似乎沒問題。如果它不能滿足您的需求，我們可以使用垂直對齊的div作爲包裝，但它的作用相同（目前爲4） – tech4242

嘗試此。

.good, 
 
.bad, 
 
.info { 
 
    width: 1.5em; 
 
    height: 1.5em; 
 
    line-height: 1.5em; 
 
    display: inline-block; 
 
    text-align: center; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-family: calibri; 
 
    margin-right: 20px; 
 
} 
 
.good { 
 
    background-color: forestgreen; 
 
    border: 1px solid darkgreen; 
 
} 
 
.bad { 
 
    background-color: coral; 
 
    border: 1px solid darkred; 
 
} 
 
.info { 
 
    background-color: cornflowerblue; 
 
    border: 1px solid darkblue; 
 
}

<span class="good">+</span> 
 
<span class="bad">-</span> 
 
<span class="info">i</span>

來源

2016-07-21 11:35:00 Pugazh

，+鉻高一點，以及 - firefox有點低。 https://test.puggan.se/test/Screenshot_20160721_145520.png –

試試這個片斷

.pros_icon { 
 
    text-align: center; 
 
    height: 20px; 
 
    width: 20px; 
 
    font-size: 26px; 
 
    font-weight: bold; 
 
    line-height: 0.9; 
 
    border: solid black 1px; 
 
    color: white; 
 
    display: inline-block; 
 
    font-family: sans-serif; 
 
    padding: 3px; 
 
} 
 
.success { 
 
    background: green; 
 
} 
 
.bad { 
 
    background: red; 
 
} 
 
.info { 
 
    background: blue; 
 
}

<span class="pros_icon success">&plus;</span> 
 
<span class="pros_icon bad">&minus;</span> 
 
<span class="pros_icon info">i</span>

這是一種替代方法。試試這個fiddle

來源

2016-07-21 11:43:40 cheralathan

在你的小提琴中測試了aboce css，在chrome中看起來不錯，但沒有在Firefox中： https://test.puggan.se/test/Screenshot_20160721_144730.png –

你有沒有試過？ – cheralathan

100x100的升技太大，很難看，如果它是中心 –

如何創建1個字符平方

回答

相關問題