如何使浮动元素居中？ [英] How do I get the floated elements to be centred?
问题描述
你好，
如果你看 http://www.kidsinaction.org.uk/Thumbs.html 您将看到一个可用于显示缩略图的页面的简化版本
各种产品的图片。
现在，由于浮动，缩略图遍历页面，直到
行已满，然后溢出到了下一行。这正是我想要的
，因为它允许显示器耗尽全部可用宽度，
，具体取决于用户的浏览器窗口等。 />
我想要的是让缩略图集中在含有元素的
中。现在也许我会问一些愚蠢的东西，毕竟，我已经把它们漂浮到了左边！是否有可能让它们居中？我的b $ b意味着最左边图像左边的空白区域会有相同数量的空白区域，因为它位于
最右边的图像。我还希望最后一行（
的数量通常少于前一行）上的图像居中，
而不是向左移动。这可能吗？
TIA
-
Alan Silver
（这一行下面添加的任何内容都与我无关。
Hello,
If you look at http://www.kidsinaction.org.uk/Thumbs.html you will see a
simplified version of a page that could be used to display thumbnail
images of various products.
Now, due to the floating, the thumbnails go across the page until the
line is full, then spill over on to the next line. This is exactly what
I want, as it allows the display to use up the full available width,
depending on the user''s browser window, etc.
What I would like though is to have the thumbnails centred within the
containing element. Now maybe I''m asking something stupid, after all, I
did float them to the left!! Is it possible to have them centred? What I
mean is that there would be the same amount of white space on the left
side of the leftmost image as there is on the right side of the
rightmost image. I would also like the images on the last line (which
will usually be fewer in number than on preceding lines) to be centred,
rather than being over to the left. Is this possible?
TIA
--
Alan Silver
(anything added below this line is nothing to do with me)
推荐答案
Alan Silver< al ********* @ nospam。 thanx.invalid>写在
新闻：PK ************** @ nospamthankyou.spam：
Alan Silver <al*********@nospam.thanx.invalid> wrote in
news:PK**************@nospamthankyou.spam:
我想要的是拥有缩略图
包含元素。现在也许我会问一些愚蠢的事情，
What I would like though is to have the thumbnails centred within
the containing element. Now maybe I''m asking something stupid, after
..container {text-align：center}
- -
Stan McCann，Uncle Pirate http://stanmccann.us/
网站管理员，NMSU Alamogordo < a rel =nofollowhref =http://alamo.nmsu.edu/target =_ blank> http://alamo.nmsu.edu/
实施< a rel =nofollowhref =http://blinkynet.net/comp/uip5.htmltarget =_ blank> http://blinkynet.net/comp/uip5.html
..container {text-align:center}
--
Stan McCann, "Uncle Pirate" http://stanmccann.us/
Webmaster, NMSU Alamogordo http://alamo.nmsu.edu/
Implementing http://blinkynet.net/comp/uip5.html
在文章< Xn ************************ @ 216.234.192.142>中，Stan McCann
< me@stanmccann.us>写道
In article <Xn************************@216.234.192.142>, Stan McCann
<me@stanmccann.us> writes
Alan Silver< al ********* @nospam.thanx.invalid>在
新闻中写道：PK ************** @ nospamthankyou.spam：
Alan Silver <al*********@nospam.thanx.invalid> wrote in
news:PK**************@nospamthankyou.spam:
我想要的是将缩略图置于
What I would like though is to have the thumbnails centred within
the containing element. Now maybe I''m asking something stupid, after
.container {text-align：center}
.container {text-align:center}
谢谢，但是如果你查看我发布的样本，你会看到
div，ID为main已经设置了此属性，并且缩略图
仍然从容器的左边缘开始。我尝试将
属性添加到< ul>本身（拇指链接的ID），但没有任何差异。
还有其他想法吗？再次感谢。
-
Alan Silver
（此行下方添加的任何内容与我无关）
Thanks, but if you look at the sample I posted, you will see that the
div with ID "main" already has this property set, and the thumbnails
still go from the left edge of the container. I tried adding the
property to the <ul> itself (ID of "thumblinks") but that didn''t make
any difference.
Any other ideas? Thanks again.
--
Alan Silver
(anything added below this line is nothing to do with me)
Alan Silver写道：
Alan Silver wrote:
你好，
如果你看 http://www.kidsinaction.org.uk/Thumbs.html 你会看到一个
一个页面的简化版本，可用于显示缩略图各种产品的图像。
现在，由于浮动，缩略图会越过页面直到
线已满，然后溢出到下一行。这正是我想要的，因为它允许显示器耗尽全部可用宽度，
取决于用户的浏览器窗口等。
我是什么我希望将缩略图放在
包含元素的中心。现在也许我会问一些愚蠢的东西，毕竟，我确实将它们漂浮在左边！是否有可能让它们居中？我的意思是，最左边图像左侧的空白区域与最右侧图像右侧的空白区域相同。我还希望最后一行上的图像（其数量通常比前面的行数少）要居中，而不是向左移动。这可能吗？
Hello,
If you look at http://www.kidsinaction.org.uk/Thumbs.html you will see a
simplified version of a page that could be used to display thumbnail
images of various products.
Now, due to the floating, the thumbnails go across the page until the
line is full, then spill over on to the next line. This is exactly what
I want, as it allows the display to use up the full available width,
depending on the user''s browser window, etc.
What I would like though is to have the thumbnails centred within the
containing element. Now maybe I''m asking something stupid, after all, I
did float them to the left!! Is it possible to have them centred? What I
mean is that there would be the same amount of white space on the left
side of the leftmost image as there is on the right side of the
rightmost image. I would also like the images on the last line (which
will usually be fewer in number than on preceding lines) to be centred,
rather than being over to the left. Is this possible?
浮动它们时没有。
为了让它们以text-align：center为中心，它们需要是
内联元素。但内联元素没有宽度。看一下
这个页面，看看它是否适合你：
http://locusmeus.com/test/thumbswith...scentered.html
-
Els http://locusmeus.com/
无法访问网页设计： http://locusoptimus.com/
Not while floating them.
In order to have them centered with text-align:center, they need to be
inline elements. But inline elements don''t have widths. Have a look at
this page and see if it''s an option for you:
http://locusmeus.com/test/thumbswith...scentered.html
--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
这篇关于如何使浮动元素居中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
