CSS基礎(十)-- 邊框及其他樣式之讓字體居中



隨筆記錄方便自己和同路人查閱,學習CSS時最好先學會HTML。

#------------------------------------------------我是可恥的分割線-------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input系列</title>
</head>
<body>
    <div class="c1 c2" style="border:1px solid red; width:50%; height:100px; font-size:30px; text-align:center;"> nihaone</div>
</body>
</html>

效果:

text-align:center;其中text-align表示設置字體位置center表示中間,這種只能水平居中,不能上下居中,有一個比較好的辦法,見下面代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input系列</title>
</head>
<body>
    <div class="c1 c2" style="
    border:1px solid red;
    width:50%;
    height:100px;
    font-size:30px;
    text-align:center;
    line-height:100px;
"> nihaone</div>
</body>
</html>

效果:

line-height:100px;表示把字體放到100px中間,這個數要和高度一致,不然格式就錯了比如高40px,你把字體放到100px居中

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input系列</title>
</head>
<body>
    <div class="c1 c2" style="
    border:1px solid red;
    width:50%;
    height:400px;
    font-size:30px;
    text-align:center;
    line-height:100px;
"> nihaone</div>
</body>
</html>

 

效果:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM