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

作者: PowerKid (暴力小孩)   2015-06-10 19:26:17
https://jsfiddle.net/0vcgujge/1/
我現在有一張圖 跟 MENU
我想要同時讓 圖跟MENU 都置中
但是目前我設定text-algin:center不知道為什麼只有MENU置中
圖片不會
有試過display:table;
margin:0 auto;的辦法
但是會造成MENU有些項目往下掉沒有同時顯示在最上面那排
請問該如何同時置中
謝謝
作者: vivian070826 (pin)   2015-06-10 20:35:00
http://imgur.com/CvrxNHE不確定是不是你要的排法
作者: eggimage (目前沒有名片)   2015-06-10 20:35:00
你的img沒有設置inline或inline-block啊然後你要怎麼排法 不是很懂text-align只對inline或inline-block有效你的排版是要怎樣的? 弄個圖來看等等 你是說你要menu+img全都置中? 都在同一行 圖片當然不會置中 要不然就是其中一者被蓋掉你的img和nav要排成sibling 然後設成inline block如果你圖片必須在螢幕正中央 menu項目只能分左右或在不同行還是不了解你敘述的 所以才說你弄個圖稿 不是code用繪圖軟體或是拿筆在紙上畫示意圖就可以了啊寫網頁第一步就是要先構圖還有想運作流程你的圖這樣看來 照我上面說的方式可行 弄個container把logo跟nav都包起來 你可以選直接width 100%然後全inline然後text-align center 或是container限定寬度然後置中裡面的東西float left你的.container的位置放錯了啊
作者: PowerKid (暴力小孩)   2015-06-10 22:43:00
有嗎 不是包起來嗎
作者: eggimage (目前沒有名片)   2015-06-10 22:52:00
你的.container是整個在外面你現在是用header head包起來
作者: PowerKid (暴力小孩)   2015-06-10 22:53:00
我用.head當container= =
作者: eggimage (目前沒有名片)   2015-06-10 22:53:00
然後這幾層的styling也不少問題
作者: PowerKid (暴力小孩)   2015-06-10 22:54:00
抱歉 不太懂哪裡錯了不是名字不同而已嗎 都包起來了
作者: eggimage (目前沒有名片)   2015-06-10 22:55:00
container是個很籠統的名字 通常不會直接拿來用 而是會加個 xxx-container之類的 比如page-container不然示意的時候很容易搞混
作者: PowerKid (暴力小孩)   2015-06-10 22:56:00
謝謝
作者: eggimage (目前沒有名片)   2015-06-10 22:56:00
你的inline放錯地方了是放到裡面的東西 不是head這層
作者: PowerKid (暴力小孩)   2015-06-10 22:59:00
了解了 所以inline跟float用法是一樣的?
作者: eggimage (目前沒有名片)   2015-06-10 23:02:00
然後你head那邊width的冒號和分號都漏掉了float跟inline不一樣 架構也要改https://jsfiddle.net/0vcgujge/5/這是你要的吧 就是置中 然後其他我就不修了
作者: PowerKid (暴力小孩)   2015-06-10 23:08:00
謝謝e大的指教

Links booklink

Contact Us: admin [ a t ] ucptt.com