居中这些图片？和更多... [英] Center these images? And more...

问题描述

我需要一些关于此页面的帮助：
http：/ /www.sarahpollock.com/new/x.php


我从A List Apart中偷走了这个布局的大部分内容。但我不是CSS大师

而且我迫切需要一些关于完成细节的帮助，因为

到目前为止我尝试的所有东西都失败了。我非常感谢

您对以下项目的见解：


1 - 我希望将顶部的四个图像放在

页面的整体中心（与页面上的大多数其他内容一样）。

如何使用CSS执行此操作而不是使用HTML表格？


2 - 在Firefox中，我在这两个图像及其各自的标题之间没有足够的空间（现在，标题是

似乎嘎吱嘎嘎地直到画作的底部边缘）。我已经尝试了CSS" padding-top"
甚至是margin-top路线，但我只是看到了IE中的好处。任何想法？


3 - 是否有任何合理的CSS方式来移动底部三个链接，

更接近四个图像？我不喜欢

现在存在的垂直距离。


非常感谢你回复的时间，

-M

I need some help with this page:
http://www.sarahpollock.com/new/x.php

I stole much of this layout from "A List Apart," but I''m no CSS guru
and I desperately need some help with the finishing details because
everything I''ve tried so far has flopped. I would really appreciate
your insight on the following items:

1 - I would like to get the four images across the top to be in the
overall center of the page (Like most everything else on the page is).
How can I do this with CSS and not resort back to HTML tables?

2 - In Firefox, I am not getting enough space between the bottoms of
the four images and their respective captions (Right now, the captions
appear crunched right up into the bottom edges of the paintings). I''ve
tried the CSS "padding-top" and even "margin-top" routes, but I''m only
seeing the benefit in IE. Any ideas?

3 - Is there any reasonable CSS way to move the bottom three links up,
closer to the four images? I don''t like the vertical distance that
exists right now.

Thank you so much for your time in replying,
-M

推荐答案

me ********* @ yahoo.com 写道：

我需要一些关于此页面的帮助：
http://www.sarahpollock.com/new/x.php
1 - 我希望将顶部的四个图像放在页面的整个中心位置（就像页面上的大多数其他内容一样）。
如何使用CSS和不要回到HTML表格？

使用表格。将表格的宽度设置为100％。 AKAIK [X] HTML没有提供

的方式来为图像添加标题，因此没有其他有效的方法可以将字幕与一组图像对齐。
3 - 有没有合理的CSS方式来移动底部三个链接，
更接近四个图像？我不喜欢现在存在的垂直距离。

I need some help with this page:
http://www.sarahpollock.com/new/x.php

1 - I would like to get the four images across the top to be in the
overall center of the page (Like most everything else on the page is).
How can I do this with CSS and not resort back to HTML tables?
Use a table. Set the table''s width to 100%. AKAIK [X]HTML provides no
way to place a caption with an image so there is no other effective way to
align the captions with a set of images.
3 - Is there any reasonable CSS way to move the bottom three links up,
closer to the four images? I don''t like the vertical distance that
exists right now.

No.

（等等......）


但你可以这样做：

1.删除class =" float"来自包装图像的DIV。不需要

无论如何浮动它。

2.删除& nbsp;来自spacer DIV。


-

jmm dash list（at）sohnen-moe（dot）com

（删除.AXSPAMGN for email）

No.
(Wait for it...)

But you could do this:
1. Remove class="float" from the DIV that wraps the images. No need to
float it anyway.
2. Remove the " " from the spacer DIV.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Re：我想把顶部的四张图片放在页面的

整体中心


查看照片卡上的积分
http://www.wellstyled.com/css-photo-cards.html

和
http://www.456bereastreet.com/archiv...tricks_part_2/

用于包装和居中


我在css样式表中使用.content进行布局以获得TRBL边距

（保证金：20 175px 10px 155px; ）。这个.content类是

BODY css功能的补充。

浮动左图像类放在内容类中我使用了
$ b左边的浮动$ b边距（边距：0 5px 5px 4px;）所以图像不是

与内容div的边缘对接。通过调整左边距

，图像集中在3列页面的中间部分。 （顶部

右下方= TRBL作为保证金的提示）

如果您查看wellstyled.com网站上的说明，它包含

参考连续排列照片和一些摆弄边缘

它可以工作。


玫瑰

Re: I would like to get the four images across the top to be in the
overall center of the page

check out the points on photo cards at
http://www.wellstyled.com/css-photo-cards.html
and
http://www.456bereastreet.com/archiv...tricks_part_2/
for wrap and centering

I made a layout with .content in the css stylesheet to have TRBL margins
(margin: 20 175px 10px 155px;). This .content class is in addition to the
BODY css features.
The float left image class was put inside the content class and I used a
margin on that float left( margin: 0 5px 5px 4px;) so the image was not
butting up against the edge of the content div. By adjusting the Left margin
the images were centered in the middle section of a 3 column page. (Top
Right Bottom Left =TRBL as a reminder for margins)
If you check out the description in the wellstyled.com site it contains
reference to lining up photos in a row and with some fiddling with margins
it could work.

Rose

Jim Moe写道：

Jim Moe wrote:

使用表格。将表格的宽度设置为100％。 AKAIK [X] HTML没有提供用于为图像添加标题的方法，因此没有其他有效的方法来将标题与一组图像对齐。

Use a table. Set the table''s width to 100%. AKAIK [X]HTML provides no
way to place a caption with an image so there is no other effective way to
align the captions with a set of images.

也许（X）HTML并没有提供这个（原生），但并不是所有这些都很难在CSS中完成。其他人已经提供了一些

例子的链接。


这个话题过去经常出现，而且其他
$ b已提供$ b样本。如果你搜索了新闻组档案，你可以在几分钟内找到它们。


-

回复电子邮件地址是一个无底的垃圾邮件桶。

请回复群组，以便每个人都可以分享。

Maybe (X)HTML doesn''t provide this (natively), but it''s not all that
difficult to do in CSS. Somebody else already provided links to some
examples.

This subject has come up in the past often enough, too, and other
samples have been provided. If you searched the newsgroup archives, you
could probably find them in a couple minutes.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

这篇关于居中这些图片？和更多...的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！