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