2. 程式人生 > >使用border-radius畫圓並使字位於字的中心

使用border-radius畫圓並使字位於字的中心

阿新 • • 發佈：2019-01-15

需求：使用html畫一個圓，圓中有個字進行說明，並且使字居中。

分析：首先畫圓，我第一個想法是用圖片，，被罵了一頓，然後想難道用canvas畫，又被罵了一頓，這才注意到CSS存在一個屬性border-radius。

border-radius本來是用於為div新增圓角，引數為*px或百分比，而這個值是指圓角的半徑（想象一下，圓角嘛，肯定是以某個點為中心，某個點為半徑來畫的，而在四個角上，有了半徑，實際上就不再需要再指定圓心了）。所以擴充套件一下，如果指定的引數值大於等於div的寬度，那麼畫出的東西應該為一個圓。

試一下：

<!doctype html>
<html style
 
="height:100%">
<head>
    <title>圓內包含字</title>
    <meta http-equiv="content-type" content="text/html;charset=gb2312">
    <style type="text/css">
        #nouse{
            height: 50%;
            margin-bottom: -150px;
        }
        #circle{
            width: 300px;
            height
 
: 300px;
            border-radius: 150px;
            margin:auto;
            background-color: red;
            border: solid 1px;
        }
    </style>
</head>
<body style="height:100%">
    <div id="mainBody" style="height:100%">
        <div id="nouse">
        </div>
 

        <div id="circle">
        </div>
    </div>
</body>
</html>

效果圖如下：
這裡寫圖片描述

OK，現在我們得到了一個圓，而且這個圓恰好位於螢幕中心（程式碼看上面內容），那如何在圓上添字呢？可能最直接的方式就是在div內部直接寫字，通過使用text-align將文字居中，但是此時並沒有位於圓的中心，而只是位於字所在文件流的中心，那麼如何使字定位在圓的中心地位，換句話說，如何垂直居中呢？

答案是使用line-height，line-height簡單的說就是設定行高。因為在原來的文件流中，行高正好是字型的大小，那如果行高設為整個圓的高度會怎麼樣？很自然的，字型將會位於該行的中心，這樣就達到了垂直居中的目的。

程式碼如下：

text-align:center;
line-height:300px;
font-size:30px;

這裡寫圖片描述

還有個有趣的問題，我們設定的圓的直徑為300px，實際畫的圖的直徑卻不是300px，知道為什麼嗎？

相關推薦

使用border-radius畫圓並使字位於字的中心

需求：使用html畫一個圓，圓中有個字進行說明，並且使字居中。 分析：首先畫圓，我第一個想法是用圖片，，被罵了一頓，然後想難道用canvas畫，又被罵了一頓，這才注意到CSS存在一個屬性border-radius。 border-radius本來是用於為di

HTML-border-radius-畫圓或橢圓

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #

border-radius畫圓

原文： https://www.cnblogs.com/s-b-b/p/5830119.html 初步學習border-radius 　　1.屬性解析 　　border-radius是css3屬性，他可以使div的角進行一定程度的彎

CSS border-radius畫圓

1.CSS畫實心圓 長度和寬度相等，border-radius設定為長度（寬度）的一半。 #circle { width: 200px; height: 200px; bac

border-radius不僅僅可以用來畫圓哦

border-radius 可以設定四個角的值 每個角的值可以設定為百分比或長度 每個角可以設定水平或垂直方向的值 <html> <head> <meta

MFC學習第三節：在視窗內點選左鍵畫圓，新增選單使圓增大。

1.在view.h中定義CString  str； 2.在void CHhView::OnDraw(CDC* pDC)中定義int x=10，y=10； 3.建立函式void CHhView::OnLButtonDown(UINT nFlags, CPoint point)

echarts畫圓環統計圖並載入動態資料 （ajax獲取資料）

最近，要用到echarts畫餅圖統計圖，於是學習了會，附上echarts官網 http://echarts.baidu.com/doc/example.html 看到echarts有一些餅圖例項，程式碼如下： option = {     tooltip : {     

使用Unity畫一條平滑曲線（貝塞爾曲線）並使小球沿曲線運動

這裡直接講解在U3D中的實現方式 直接拿三階貝塞爾曲線為例，首先觀察下圖： 從圖中可以看出，只有四個點是保持不變的,分別是P0,P1,P2,P3，這四個點兩兩相連得到三個線段 （1）在上四點構成的三個線段中，p0-p1上有到一個點，p1

CSS3的border-radius屬性畫出圓圈效果（border-width帶值）

我們知道border-radius可以畫出圓的效果，但是，border-radius的半徑若小於border的厚度，則邊框內部就不具有圓角效果 如： 程式碼為： div#circle { width: 100px; height: 100px; backgrou

用CSS3的圓角border-radius屬性,畫一個圓形

習慣了方方框框，我們會使用圓角技術使網頁變得很圓潤，而不是一個個稜角。圓角被廣泛運用於網頁中，比如把邊框加個圓角，這是最流行的用法，讓網頁看起來很舒服。還有就是使用者的頭像，把它做成一個圓形的，看到現在的網頁中出現的頻率也很大。 以前製作圓角的方法比較繁瑣，山頂角、洋蔥皮、

前端js如何生成一個對象，並轉化為json字符串

cti {} 理解 () min jquery pan i++ 2.0 一，直接上代碼 <script src="../../Content/jquery-2.0.3.min.js" type="text/javascript"></script>

《劍指Offer》題目：調整數組順序使奇數位於偶數前面

code ont else 指向 偶數 span cnblogs for emp 題目描述：調整數組順序使奇數位於偶數前 輸入一個整數數組，實現一個函數來調整該數組中數字的順序，使得所有的奇數位於數組的前半部分，所有的偶數位於位於數組的後半部分，並保證奇數和奇數，偶數和偶數

【劍指Offer面試題】 九度OJ1516：調整數組順序使奇數位於偶數前面

pen 沒有 name func hide tracking 順序 popu type 題目鏈接地址： http://ac.jobdu.com/problem.php?pid=1516 題目1516：調整數組順序使奇數位於偶數前面 時間限制：

CSS3屬性之圓角效果——border-radius屬性

20px con 一半 正方 ace ring css key lpad 在css3之前，要實現圓角的效果可以通過圖片或者用margin屬性實現(可以參考這裏：http://www.hicss.net/css-practise-of-image-round-box/)。

用 border 屬性 畫各種邊框

text blog 屬性 .cn itl 效果 border items head 嗯，如圖，想要個類似這樣的效果 <!DOCTYPE html> <html lang="en"> <head> <meta charse

中點畫線法畫圓

while lose 詳細 ack sin 坐標 mil getc using 中點畫線法已經在畫直線的時候詳細講過了，畫圓時我們也可以用這種方法。畫一個圓心為坐標原點的1/4圓，然後對其進行簡單幾何變換，平移對稱，就可以得到任意圓。 類似的用中點畫線法，從（

劍指offer十三之調整數組順序使奇數位於偶數前面

emp i++ temp logs [] 數字 奇數位於偶數前面 順序 .com 一、題目 　　輸入一個整數數組，實現一個函數來調整該數組中數字的順序，使得所有的奇數位於數組的前半部分，所有的偶數位於位於數組的後半部分，並保證奇數和奇數，偶數和偶數之間的相對位置不變。 二、

border-radius

最大值 round str 水平 jpg 100% lan .cn color border-radius設置 1. 水平和垂直方向的值保持一致：左上角 右上角 右下角 左下角 2. 水平和垂直方向的值分開，中間用/分開：(水平方向)左上角 右上角 右下角 左下角/(垂直方

canvas畫圓

基礎 als sla minutes getc ext stroke scrip ont <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti

Python 連接MongoDB並比較兩個字符串相似度的簡單示例

tab diff port pycharm 步驟 mil microsoft pymongo tro 本文介紹一個示例：使用 pymongo 連接 MongoDB，查詢MongoDB中的 字符串 記錄，並比較字符串之間的相似度。 一，Python連接MongoDB 大致步驟