文章詳情頁
css - Flex布局問題
瀏覽:202日期:2023-06-19 15:13:10
問題描述
header是用的flex布局,想要搜索框水平居中,類似原生IOS里面的布局
不受左右兩邊內容的影響,依然水平居中我記得我之前實現過,后來用了flex.css就忘了,麻煩看看用這個怎么實現
問題解答
回答1:.header{ display:flex; flex-flow:row nowrap; align-item:center; justify-content:space-around;}
詳細了解Flex布局見:http://www.ruanyifeng.com/blo...
回答2:只有三個元素可以直接用 space-between 撐開
https://jsfiddle.net/straybug...
你后來更新的
不受左右兩邊內容的影響,依然水平居中
既然不受影響那么只能是 absolute 抽離出來再居中了。
https://jsfiddle.net/straybug...
回答3:主要用到 align-items: center 即可這是demo
回答4:中間那個就用絕對定位,左右邊寬度不一樣的話會影響中間位置
.search { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
標簽:
CSS
相關文章:
1. docker-compose中volumes的問題2. 關docker hub上有些鏡像的tag被標記““This image has vulnerabilities””3. boot2docker無法啟動4. nignx - docker內nginx 80端口被占用5. docker安裝后出現Cannot connect to the Docker daemon.6. java - SSH框架中寫分頁時service層中不能注入分頁類7. dockerfile - 為什么docker容器啟動不了?8. node.js - antdesign怎么集合react-redux對input控件進行初始化賦值9. docker容器呢SSH為什么連不通呢?10. 關于docker下的nginx壓力測試
排行榜

網公網安備