kmc

管理员

UID165
注册日期2004-11-25
最后登录2022-09-22
发帖数9186
经验397枚
威望1点
贡献值124点
好评度41点

加关注写私信

阅读：2549回复：14

[已解决]有没有办法把单独查看的图片居中？

楼主^#

更多发布于：2010-07-30 02:54

单独查看的图片出现在左上角不是很美观，希望能够把它居中，有没有CSS可以实现？

顺便分享usercontent代码，使用后，单独查看的图片如果有透明部分（png/gif），会像Photoshop一样棋盘格显示。

HTML > BODY > IMG:only-child {
  margin: -8px !important;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABlBMVEX////g4OACVBJKAAAAHUlEQVR42sXNoQEAAACCMP3/aQvewCKFXCEF/Y8BRRAAgWKqk6wAAAAASUVORK5CYII=);
}

喜欢0

Waterfox Current和Firefox Nightly都用，逐渐走出XUL扩展依赖

alanfly 千年狐狸 UID31035 注册日期2009-11-10 最后登录2024-05-16 发帖数2767 经验578枚威望1点贡献值128点好评度100点加关注写私信	1楼^# 发布于：2010-07-30 02:54 刚好有个在用的； @namespace url(http://www.w3.org/1999/xhtml); HTML > BODY > IMG:only-child { display: block !important; margin-left: auto !important; margin-right: auto !important; }
	回复(0) 喜欢(0)

saga2008

非常火狐

UID25840
注册日期2008-08-15
最后登录2024-01-21
发帖数694
经验12枚
威望0点
贡献值0点
好评度1点

加关注写私信

2楼^#

发布于：2010-07-30 02:54

Center images | userstyles.org
http://userstyles.org/styles/220#post-discussion

回复喜欢

just4fun

千年狐狸

UID30408
注册日期2009-09-17
最后登录2016-04-28
发帖数1497
经验10枚
威望0点
贡献值0点
好评度2点

加关注写私信

3楼^#

发布于：2010-07-30 02:54

Re: 有没有办法把单独查看的图片居中？

kmc：
顺便分享usercontent代码，使用后，单独查看的图片如果有透明部分（png/gif），会像Photoshop一样棋盘格显示。
HTML > BODY > IMG:only-child { margin: -8px !important; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABlBMVEX////g4OACVBJKAAAAHUlEQVR42sXNoQEAAACCMP3/aQvewCKFXCEF/Y8BRRAAgWKqk6wAAAAASUVORK5CYII=); }
回到原帖

这个好，用上了，谢

回复喜欢

kmc

管理员

UID165
注册日期2004-11-25
最后登录2022-09-22
发帖数9186
经验397枚
威望1点
贡献值124点
好评度41点

加关注写私信

4楼^#

发布于：2010-07-30 02:54

谢谢几位

有没有在垂直方向也居中的？
试了下
margin-top: auto !important;
margin-bottom: auto !important;

没有用

Waterfox Current和Firefox Nightly都用，逐渐走出XUL扩展依赖

回复喜欢

alanfly 千年狐狸 UID31035 注册日期2009-11-10 最后登录2024-05-16 发帖数2767 经验578枚威望1点贡献值128点好评度100点加关注写私信	5楼^# 发布于：2010-07-30 02:54 kmc：谢谢几位有没有在垂直方向也居中的？试了下 margin-top: auto !important; margin-bottom: auto !important; 没有用回到原帖用这个版本的； @namespace url(http://www.w3.org/1999/xhtml); html > body > img:only-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; padding: 3px; }
	回复(0) 喜欢(0)

kmc

管理员

UID165
注册日期2004-11-25
最后登录2022-09-22
发帖数9186
经验397枚
威望1点
贡献值124点
好评度41点

加关注写私信

6楼^#

发布于：2010-07-30 02:54

这个不行啊，只出现在左上角

Waterfox Current和Firefox Nightly都用，逐渐走出XUL扩展依赖

回复喜欢

alanfly 千年狐狸 UID31035 注册日期2009-11-10 最后登录2024-05-16 发帖数2767 经验578枚威望1点贡献值128点好评度100点加关注写私信	7楼^# 发布于：2010-07-30 02:54 kmc：这个不行啊，只出现在左上角回到原帖我这可以啊； 3.6、4.0下都试过。
	回复(0) 喜欢(0)

kmc

管理员

UID165
注册日期2004-11-25
最后登录2022-09-22
发帖数9186
经验397枚
威望1点
贡献值124点
好评度41点

加关注写私信

8楼^#

发布于：2010-07-30 02:54

OK可以了，是我之前那个透明代码里面有一条
margin: -8px !important;
冲突了。完整的代码:

@namespace url(http://www.w3.org/1999/xhtml);
html > body > img:only-child {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	padding: 3px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABlBMVEX////g4OACVBJKAAAAHUlEQVR42sXNoQEAAACCMP3/aQvewCKFXCEF/Y8BRRAAgWKqk6wAAAAASUVORK5CYII=);
}

Waterfox Current和Firefox Nightly都用，逐渐走出XUL扩展依赖

回复喜欢

just4fun

千年狐狸

UID30408
注册日期2009-09-17
最后登录2016-04-28
发帖数1497
经验10枚
威望0点
贡献值0点
好评度2点

加关注写私信

9楼^#

发布于：2010-07-30 02:54

kmc：OK可以了，是我之前那个透明代码里面有一条
margin: -8px !important;
冲突了。完整的代码:

@namespace url(http://www.w3.org/1999/xhtml);
html > body > img:only-child {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	padding: 3px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABlBMVEX////g4OACVBJKAAAAHUlEQVR42sXNoQEAAACCMP3/aQvewCKFXCEF/Y8BRRAAgWKqk6wAAAAASUVORK5CYII=);
}

回到原帖

这下更实用了，我也跟进

回复喜欢

dkmzazdy

火狐狸

UID33222
注册日期2010-06-30
最后登录2018-06-09
发帖数166
经验33枚
威望0点
贡献值16点
好评度0点

加关注写私信

10楼^#

发布于：2010-07-30 02:54

这个不错，收下了。

持而盈之，不如其己

回复喜欢

openicq

狐狸大王

UID5412
注册日期2005-04-23
最后登录2015-12-15
发帖数353
经验10枚
威望0点
贡献值0点
好评度0点

加关注写私信

11楼^#

发布于：2010-07-30 02:54

kmc：OK可以了，是我之前那个透明代码里面有一条
margin: -8px !important;
冲突了。完整的代码:

@namespace url(http://www.w3.org/1999/xhtml);
html > body > img:only-child {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	padding: 3px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABlBMVEX////g4OACVBJKAAAAHUlEQVR42sXNoQEAAACCMP3/aQvewCKFXCEF/Y8BRRAAgWKqk6wAAAAASUVORK5CYII=);
}

回到原帖

不错不错~~
不过有点小BUG？
所有图片都在外圈带了一圈棋盘格

图片：TEMP.jpg

回复喜欢

kmc

管理员

UID165
注册日期2004-11-25
最后登录2022-09-22
发帖数9186
经验397枚
威望1点
贡献值124点
好评度41点

加关注写私信

12楼^#

发布于：2010-07-30 02:54

的确，去掉/*padding: 3px;*/后还是有一小圈

Waterfox Current和Firefox Nightly都用，逐渐走出XUL扩展依赖

回复喜欢

openicq 狐狸大王 UID5412 注册日期2005-04-23 最后登录2015-12-15 发帖数353 经验10枚威望0点贡献值0点好评度0点加关注写私信	13楼^# 发布于：2010-07-30 02:54 去掉padding: 3px; 这一行正常了
	回复(0) 喜欢(0)

just4fun 千年狐狸 UID30408 注册日期2009-09-17 最后登录2016-04-28 发帖数1497 经验10枚威望0点贡献值0点好评度2点加关注写私信	14楼^# 发布于：2010-07-30 02:54 如楼上所言
	回复(0) 喜欢(0)

您需要登录后才可以回帖，登录或者注册

[已解决]有没有办法把单独查看的图片居中？

最新喜欢：