宁波网站建设的过程,网页qq登录网址,个人摄影网站模板,网页微信文件夹储存在什么位置你还在为居中而烦恼吗#xff0c;水平居中多个元素、创建响应式布局、垂直和水平同时居中内容。它#xff0c;display: flex 和 justify-content: center 都可以完成#xff01;
display: flex#xff1a;将元素定义为flex容器 justify-content#xff1a;定义项目在主轴… 你还在为居中而烦恼吗水平居中多个元素、创建响应式布局、垂直和水平同时居中内容。它display: flex 和 justify-content: center 都可以完成
display: flex将元素定义为flex容器 justify-content定义项目在主轴上的对齐方式 例1导航菜单居中
!DOCTYPE html
html langzh
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylenav ul {display: flex;justify-content: center;list-style-type: none;padding: 0;}nav li {font-size: 16px;margin: 0 10px;}/style
/head
bodynavullia href#首页/a/lilia href#关于/a/lilia href#联系/a/li/ul/nav
/body
/html 例2 图片和文字并排居中
!DOCTYPE html
html langzh
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.container {display: flex;justify-content: center;align-items: center;}.container img {margin-right: 10px;width: 30px;height: 30px;}/style
/head
bodydiv classcontainerimg src../../Web/static/img/LA.png altLogoh1公司名称/h1/div
/body
/html 例3多个块级元素居中
!DOCTYPE html
html langzh
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.features {display: flex;justify-content: center;flex-wrap: wrap;}.feature {margin: 10px;padding: 20px;background-color: #f0f0f0;}/style
/head
bodydiv classfeaturesdiv classfeature功能1/divdiv classfeature功能2/divdiv classfeature功能3/div/div
/body
/html 其余属性
容器属性
display: flex将元素定义为flex容器flex-direction定义主轴方向row, column, row-reverse, column-reversejustify-content定义项目在主轴上的对齐方式align-items定义项目在交叉轴上的对齐方式flex-wrap定义是否允许项目换行
项目属性
flex-grow定义项目的放大比例flex-shrink定义项目的缩小比例flex-basis定义项目在分配多余空间之前的初始大小align-self允许单个项目有与其他项目不一样的对齐方式
