[問題] 圖片與menu如何置中?

看板Web_Design作者 (暴力小孩)時間9年前 (2015/06/10 19:26), 9年前編輯推噓1(1推 0噓 36→)
留言37則, 3人參與, 最新討論串1/1
https://jsfiddle.net/0vcgujge/1/ 我現在有一張圖 跟 MENU 我想要同時讓 圖跟MENU 都置中 但是目前我設定text-algin:center不知道為什麼只有MENU置中 圖片不會 有試過display:table; margin:0 auto;的辦法 但是會造成MENU有些項目往下掉沒有同時顯示在最上面那排 請問該如何同時置中 謝謝 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 1.175.103.32 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1433935582.A.A74.html
→
06/10 20:35, , 1F
06/10 20:35, 1F
→
06/10 20:35, , 2F
不確定是不是你要的排法
06/10 20:35, 2F
v大謝謝 但是 不是 我要的排法是圖片跟menu都在同一排 menu跟圖片的間距是20px 然後會隨著螢幕的寬度自己置中
→
06/10 20:35, , 3F
你的img沒有設置inline或inline-block啊
06/10 20:35, 3F
→
06/10 20:37, , 4F
然後你要怎麼排法 不是很懂
06/10 20:37, 4F
→
06/10 20:37, , 5F
text-align只對inline或inline-block有效
06/10 20:37, 5F
→
06/10 20:38, , 6F
你的排版是要怎樣的? 弄個圖來看
06/10 20:38, 6F
我img設了inline也是不會置中 我要的排法就是 menu跟圖片的間距是20px 然後就依照螢幕的寬度去置中 所以 我設了text-align:center 去想讓menu跟圖片自己置中 但圖片不會動 只有menu跑到中間 https://jsfiddle.net/0vcgujge/2/ 類似這樣 但是menu只顯示幾個其他都不見了 ※ 編輯: PowerKid (1.175.103.32), 06/10/2015 21:00:55
推
06/10 21:07, , 7F
等等 你是說你要menu+img全都置中? 都在同一行 圖片
06/10 21:07, 7F
→
06/10 21:08, , 8F
當然不會置中 要不然就是其中一者被蓋掉
06/10 21:08, 8F
→
06/10 21:08, , 9F
你的img和nav要排成sibling 然後設成inline block
06/10 21:08, 9F
→
06/10 21:09, , 10F
如果你圖片必須在螢幕正中央 menu項目只能分左右或
06/10 21:09, 10F
→
06/10 21:09, , 11F
在不同行
06/10 21:09, 11F
→
06/10 21:10, , 12F
還是不了解你敘述的 所以才說你弄個圖稿 不是code
06/10 21:10, 12F
先謝謝e大 因為我實在做不出來 實在生不出圖片 抱歉 我要的就是menu+img全都置中在同一行 然後 menu跟img的間距是20px 隨螢幕置中 這樣就好了 也不用圖片特別置中 另外sibling是什麼意思 http://imgur.com/S1wIRgH
勉強生出的圖大概這樣 ※ 編輯: PowerKid (1.175.103.32), 06/10/2015 21:39:42 ※ 編輯: PowerKid (1.175.103.32), 06/10/2015 21:57:12
→
06/10 22:17, , 13F
用繪圖軟體或是拿筆在紙上畫示意圖就可以了啊
06/10 22:17, 13F
→
06/10 22:18, , 14F
寫網頁第一步就是要先構圖還有想運作流程
06/10 22:18, 14F
→
06/10 22:19, , 15F
你的圖這樣看來 照我上面說的方式可行 弄個container把
06/10 22:19, 15F
→
06/10 22:20, , 16F
logo跟nav都包起來 你可以選直接width 100%然後全inline
06/10 22:20, 16F
→
06/10 22:21, , 17F
然後text-align center 或是container限定寬度然後置中
06/10 22:21, 17F
→
06/10 22:21, , 18F
裡面的東西float left
06/10 22:21, 18F
謝謝e大 不過看起來是沒辦法 因為我原本就有container包起來了 但就是無法置中 https://jsfiddle.net/0vcgujge/4/ 這是我照妳說的用的 但是menu不見了 ※ 編輯: PowerKid (1.175.103.32), 06/10/2015 22:37:58
→
06/10 22:40, , 19F
你的.container的位置放錯了啊
06/10 22:40, 19F
→
06/10 22:43, , 20F
有嗎 不是包起來嗎
06/10 22:43, 20F
→
06/10 22:52, , 21F
你的.container是整個在外面
06/10 22:52, 21F
→
06/10 22:53, , 22F
你現在是用header head包起來
06/10 22:53, 22F
→
06/10 22:53, , 23F
我用.head當container= =
06/10 22:53, 23F
→
06/10 22:53, , 24F
然後這幾層的styling也不少問題
06/10 22:53, 24F
→
06/10 22:54, , 25F
抱歉 不太懂哪裡錯了不是名字不同而已嗎 都包起來了
06/10 22:54, 25F
→
06/10 22:55, , 26F
container是個很籠統的名字 通常不會直接拿來用 而是會
06/10 22:55, 26F
→
06/10 22:55, , 27F
加個 xxx-container之類的 比如page-container
06/10 22:55, 27F
→
06/10 22:55, , 28F
不然示意的時候很容易搞混
06/10 22:55, 28F
→
06/10 22:56, , 29F
謝謝
06/10 22:56, 29F
→
06/10 22:56, , 30F
你的inline放錯地方了
06/10 22:56, 30F
→
06/10 22:57, , 31F
是放到裡面的東西 不是head這層
06/10 22:57, 31F
→
06/10 22:59, , 32F
了解了 所以inline跟float用法是一樣的?
06/10 22:59, 32F
→
06/10 23:02, , 33F
然後你head那邊width的冒號和分號都漏掉了
06/10 23:02, 33F
→
06/10 23:02, , 34F
float跟inline不一樣 架構也要改
06/10 23:02, 34F
→
06/10 23:03, , 35F
06/10 23:03, 35F
→
06/10 23:03, , 36F
這是你要的吧 就是置中 然後其他我就不修了
06/10 23:03, 36F
→
06/10 23:08, , 37F
謝謝e大的指教
06/10 23:08, 37F
‣ 更多 PowerKid 的文章
文章代碼(AID): #1LU1xUfq (Web_Design)