< div>的垂直对齐 [英] vertical alignment of a <div>
问题描述
您好，
我正在努力更新我的一些基于表格的网站，使用CSS代替
表格。我的一个网站有一个由三个元素组成的标题：
ABC
在我之前的设计中，这是使用表格完成的。 A，B和C各自
< tdelements。
我的新设计使用div。每个A，B，C和一个
容器div都有一个div。 A，B和C的div都使用float：left来获取它们在同一行上的
。 A和B包含75像素高的图像。
现在，我遇到的问题是C。比A和B短，并且
需要相对于A和B垂直居中。在我的旧表中 -
版本的网站，这是用valign：middle。但是，这个
不适用于CSS。
我试过类似下面这样的东西，我觉得它会起作用但是它
没有：
< div style =" height：75px; float：left;">
< div style =" margin-top：auto; margin-bottom：auto;">
C
< / div>
< / div>
代替auto我上面例子中的边距为8px实现了我想要获得的效果，但我宁愿自动完成定心
而不是我必须预先计算像素值。
我也试过坚持vertical-align：middle在各个地方没有
有用。
谢谢，
Scott
-------------------------------------------------- ---------
发布时使用Android新闻组下载器：
.... http://www.sb-software.com/android
---------- -------------------------------------------------
Hello,
I''m working on updating some of my table-based sites to use CSS instead of
tables. One of my sites has a header that is composed of three elements:
A B C
In my prior design, this was done using a table. A, B, and C were each
<tdelements.
My new design uses divs. There is a div for each of A, B, C, and a
container div. The divs for A, B, and C all use float:left to get them on
the same line. A and B contain images that are 75 pixels in height.
Now, the problem I''m faced with is that "C" is shorter than A and B, and
needs to be vertically centered with respect to A and B. In my old table-
version of the site, this was done with "valign: middle". However, this
doesn''t work with CSS.
I tried something like the following, which I thought would work, but it
didn''t:
<div style="height: 75px; float: left;">
<div style="margin-top: auto; margin-bottom: auto;">
C
</div>
</div>
Substituting the "auto" margins in my above example with "8px" achieves
the effect that I''m trying to get, but I''d rather have the centering done
automatically rather than me having to precompute the pixel values.
I''ve also tried sticking "vertical-align: middle" in various places to no
avail.
Thanks,
Scott
-----------------------------------------------------------
Posted using Android Newsgroup Downloader:
.... http://www.sb-software.com/android
-----------------------------------------------------------
推荐答案
sc***@nospam.com ：
>我正在努力更新我的一些基于表格的网站，以使用CSS代替
表格。我的一个网站有一个由三个元素组成的标题：
A B C
在我之前的设计中，这是使用表格完成的。 A，B和C各自
< tdelements。
我的新设计使用div。每个A，B，C和一个
容器div都有一个div。 A，B和C的div都使用float：left来使它们在同一条线上。 A和B包含75像素高的图像。
>I''m working on updating some of my table-based sites to use CSS instead of
tables. One of my sites has a header that is composed of three elements:
A B C
In my prior design, this was done using a table. A, B, and C were each
<tdelements.
My new design uses divs. There is a div for each of A, B, C, and a
container div. The divs for A, B, and C all use float:left to get them on
the same line. A and B contain images that are 75 pixels in height.
这并没有告诉我们我们需要知道什么。提供一个URL到桌子
基于
的代码，以便我们可以看到你实际上想要做什么。
-
Spartanicus
That doesn''t tells us what we need to know. Provide an url to the table
based code so that we can see what you are actually trying to do.
--
Spartanicus
这并没有告诉我们我们需要知道什么。提供表格的URL
That doesn''t tells us what we need to know. Provide an url to the table
基于
的代码，以便我们可以看到您实际要做的事情。
based code so that we can see what you are actually trying to do.
这是一个链接：
http://smbaker.com/eugene_hikers_guide/test-07032006/
这里是HTML的摘录：
< table>< tr>
< td valign = middle>< div id =" header_logo">< span> Eugene ，Oregon Hiker's Guide
< / span>< / div>< / td>
< td valign = middle>< div id = " header_3tri">< span>< / span>< / div>< / td>
< td valign = middle>
< div id =" header_title">< span class =" title">目录< / span>< / div>
< div id =" header_subtitle"> ;< span class =" subtitle">
指南中所有加息的清单。< / span>< / div>< / div>
< / td>
< / tr>
< /表>
请注意我正在使用图像替换技术来获得第一个
两个< tdelements。虽然它比使用img
标签更简单，但我故意这样做以实验/学习
的好处。
有问题的点是最终的< tdelement。包含
字词的内容目录和所有......的清单。在我基于表格的
解决方案中，这个元素相对于其他元素垂直居中。
我发现没有可接受的方法来使用CSS而不使用CSS表格。我找到的最好的解决方案是：
http://www.jakpsatweb.cz/css/css-ver...-solution.html
它看起来会起作用，但是我对使用的技巧感到困扰
会导致IE应用于其他浏览器的不同样式。据推测，如果微软修复了IE中的所有错误，这些技巧将不再是b $ b工作，对吧？依赖IE错误正确显示的页面将被打破？b / b
-------------------- ---------------------------------------
使用Android发布新闻组下载：
.... http：// www .sb-software.com / android
------------------------------ -----------------------------
Here is a link:
http://smbaker.com/eugene_hikers_guide/test-07032006/
And here is an excerpt of the HTML:
<table><tr>
<td valign=middle><div id="header_logo"><span>Eugene, Oregon Hiker''s Guide
</span></div></td>
<td valign=middle><div id="header_3tri"><span></span></div></td>
<td valign=middle>
<div id="header_title"><span class="title">Table of Contents</span></div>
<div id="header_subtitle"><span class="subtitle">List of all the hikes in
the guide.</span></div></div>
</td>
</tr>
</table>
Please note that I''m using an image-replacement technique for the first
two <tdelements. Although it''s less straightforward than using the img
tags, I''m purposely doing it that way for the experimental/learning
benefit.
The point in question is the final <tdelement. The one that contains the
words "Table of Contents" and "List of all the...". In my table-based
solution, this element is vertically centered with respect to the others.
I can find no acceptable way to do this using CSS without the tables. The
best solution I''ve found is at:
http://www.jakpsatweb.cz/css/css-ver...-solution.html
It looks like that would work, but I''m troubled by the use of tricks that
cause different styles to be applied to IE than other browsers. Presumably
if microsoft ever fixes all of the bugs in IE, these tricks will no longer
work, right? and pages that rely on IE bugs to present correctly will be
broken?
-----------------------------------------------------------
Posted using Android Newsgroup Downloader:
.... http://www.sb-software.com/android
-----------------------------------------------------------
sc *** @ nospam.com 写道：
sc***@nospam.com wrote:
> ;这并没有告诉我们我们需要知道什么。提供基于表格的代码的URL，以便我们可以看到您实际要做的事情。
>That doesn''t tells us what we need to know. Provide an url to the table
based code so that we can see what you are actually trying to do.
这是一个链接：
http://smbaker.com/eugene_hikers_guide/test-07032006/
这看起来不像是基于表格的设计试图用
替换。它似乎是尝试非表格代码，之后会抛出一张表格。
假设 http://www.sb-software.com/ 实际上是你想要模仿的
：
首先应该指出的是，这个页面比使用表格进行布局会遇到更严重的问题。这些
问题需要先修复。
在主页上，徽标图像应标记为< h1content，
应提供图像的alt内容减去副标题（即
" SB-Software"）。在子页面上，徽标图像是装饰性的，应该是
编码。 什么是新的子页面应该例如具有
什么是新的作为< h1content。
在主页上，您应该丢失欢迎使用SB软件。标头
text，欢迎光临 SB软件是一种光顾和毫无意义的东西。文字
是多余的，因为它已经显示在标头图像中。
我看不出为什么这三个三角形不应该成为徽标的一部分
图片。顺便说一句，使用jpeg计算机生成的图像，如徽标
会导致不必要的瑕疵。索引的Png或Gif是一个更好的选择
这里。
这样可以将标头图片的标头图片缩小为标语图片
显示在它的右侧。将< h1和
的显示属性设置为内联标语文本这应该是您的标头分类：
http：// homepage.ntlworld.ie/spartanicus/sb-software.htm
-
Spartanicus
That doesn''t look like a table based design that you are trying to
replace. It looks like an attempt at non table code with a table thrown
in afterwards.
Assuming that http://www.sb-software.com/ is what you are actually
trying to emulate:
It should first be pointed out that this page suffers from much more
serious problems than the use of tables for layout purposes. These
problems need to be fixed first.
On the home page the logo image should be marked up as the <h1content,
alt content for the image should be provided minus the subtitle (i.e.
"SB-Software"). On sub pages the logo image is decorative and should be
coded as such. The "What''s new" sub pages should for example have
"What''s new" as the <h1content.
On the home page you should lose the "Welcome to SB-Software" masthead
text, "Welcome to" is patronising and pointless, the "SB-Software" text
is superfluous since it is already shown in the masthead image.
I see no reason why the three triangles should not be part of the logo
image. Btw, using jpeg for computer generated images like the logo
causes unnecessary artifacts. An indexed Png or Gif is a better choice
here.
That reduces the masthead to a logo image with slogan text to be
displayed to the right of it. Set the display property of the <h1and
the slogan text to "inline" and that should be your masthead sorted:
http://homepage.ntlworld.ie/spartanicus/sb-software.htm
--
Spartanicus
这篇关于< div>的垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
