作者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/cn.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