html+css 實現(xiàn)導航欄文字居中

cnio 發(fā)布于2019-08-30 11:01 / 738人閱讀

摘要：效果文字水平垂直居中代碼首頁集團介紹專家聯(lián)盟合作機構(gòu)新聞動態(tài)代碼

效果

文字水平垂直居中

html代碼

css代碼

header .header-nav {
    height: 100px;
}
header .header-nav ul {
    width: 100%;
    height: 100px;
    border: 1px solid #000;
}
    
header .header-nav ul li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100px;
}

header .header-nav ul li a {
    display: block;
    padding: 0 30px;
    line-height: 100px;
    font-size: 20px;
}

GPU云服務器云服務器導航欄css代碼 html標題欄居中導航欄html html 設置導航欄

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/114719.html

相關(guān)文章

網(wǎng)頁導航欄 html + css的代碼實現(xiàn)

摘要：一般來講，我們的網(wǎng)頁導航欄是這么個模式來構(gòu)建在結(jié)構(gòu)上首先我們需要給導航欄的給個類名一般為然后就是一個無序表格由于導航欄的文字一般都是鏈接用來跳轉(zhuǎn)頁面要在里面包含一個首頁云云商城智慧門店營銷平臺媒體聯(lián)盟關(guān)于云道在樣式上目前我見過的分為兩種導航一般來講，我們的網(wǎng)頁導航欄是這么個模式來構(gòu)建在結(jié)構(gòu)上：1.首先我們需要給導航欄的div 給個類名一般為nav2.然后就是一個無序表格?3.由于導航欄的文...

keke 2019-04-23 11:55 評論0 收藏0
css常見的各種布局上（兩列布局）

摘要：目錄一大結(jié)構(gòu)上的導航欄和內(nèi)容區(qū)域兩欄布局博客園為例騰訊課堂個人中心頁慕課網(wǎng)個人中心頁個人中心頁二版的結(jié)構(gòu)三類似九宮格布局的兩列結(jié)構(gòu)四圖文兩列布局左圖右文字非垂直居中，左圖，右固定行數(shù)的文字，右側(cè)文字和左邊圖片垂直居中。目錄：一、大結(jié)構(gòu)上的導航欄和內(nèi)容區(qū)域兩欄布局1、博客園為例2、騰訊課堂個人中心頁3、慕課網(wǎng)個人中心頁4、github個人中心頁二、mini版的nav+cont結(jié)構(gòu)三、類似九宮格...

番茄西紅柿 2019-04-23 11:40 評論0 收藏0
CSS14個實用技巧的精選和推薦

摘要：此文章主要為大家介紹了個實用技巧的精選推薦，具有一定的參考價值，學習覺得挺不錯的，分享給大家。設計的同時就可以把這個設成顯示來檢查它的效果。塊元素居中對齊如果想做個固定寬度的網(wǎng)頁并且想讓網(wǎng)頁水平居中的話，通常是這樣你會使用來圍上所有元素。此文章主要為大家介紹了CSS14個實用技巧的精選推薦，具有一定的參考價值，學習覺得挺不錯的，分享給大家。創(chuàng)業(yè)項目 2018優(yōu)選本頁技巧目錄： 1...

elisa.yang 2019-08-30 11:22 評論0 收藏0
你們要的HTML布局技巧：如何規(guī)范搭建網(wǎng)頁架構(gòu)？

摘要：主體內(nèi)容區(qū)域小米首頁下小米商城的主題內(nèi)容區(qū)域，也是整體網(wǎng)頁面積最廣的區(qū)塊實在不知道定主體內(nèi)容區(qū)塊時也可以根據(jù)面積比重來劃分，最大的那塊一定是主題中心，布局的重復性很高。單就深入了解布局規(guī)范都足夠說上一個月的，今天我就不論大范圍，挑選小米網(wǎng)站首頁的部分區(qū)塊布局來講解吧！下面是小米官網(wǎng)的首頁，很多人一看到這樣的網(wǎng)頁就傻眼，不知道咋弄，要么就隨性布局，要么就干看著，其實遇到問題首先一點就...

yvonne 2019-08-30 15:56 評論0 收藏0