垂直对齐 [英] vertical-align

查看：58
本文介绍了垂直对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在建立一个关于Java（编程语言）的网站。问题是

我使用了图层（div）。我想在这些图层中以1 / b
的形式制作一个标题，然后垂直调整。但是这并不期待

工作。

我就是这样做的：


< html>

< head>

< title> De programmeertaal Java< / title>

< style>

h1 {font-size：50; font-family：Times New Roman; text-align：center;}

< / style>

< / head>

< body>

< div id =" logo"风格= QUOT;位置：绝对的;可见性：继承;

宽度：250px;身高：250px;

左：5;前5; z-index：4;

background-image：url（''logo_background.png''）">

< img src =" javalogo.png" ;>< / img>

< / div>


< div id =" header"风格= QUOT;位置：绝对的;能见度：继承;

宽度：740px;身高：200px;

左：255;前5; z-index：2;

background-image：url（''header_background.png''）">

< h1> De programmeertaal Java< / h1> ;

< / div>


< / body>

< / html>


有人有个主意吗？


谢谢，

Blomme Thomas

解决方案

pieter blomme写道：

问题是我使用了图层（div）。我想在这些图层中的一个中创建一个标题，然后垂直地将其打开。但这并不是为了工作。


您的技术似乎是基于猜测

文本最终的字体大小。你肯定不知道这一点，所以它一定会失败。


简单的方法是：


#container {display：表细胞; vertical-align：middle; $


....但是Internet Explorer并不支持这个。如果你有能力让你的风格被那个过于普遍的用户代理所忽略，那么这就是通过它来实现它的方式。否则，你会被卡住。

h1 {font-size：50; font-family：Times New Roman; text-align：center;}


你需要验证你的CSS。 50什么？您可能应该阅读
http：//css-discuss.incutio .com /？page = FontSize 。

left：5;前5;的z-index：4;


更多语法错误

< img src =" javalogo.png">< / img>




alt属性是必需的，< / img>标签违反了HTML

兼容性指南。


-

David Dorward< http://blog.dorward.me .UK /> < http://dorward.me.uk/>

Home是comp.infosystems中〜/ .bashrc


的地方.pempter blomme写道： ce [n]垂直



http://www.student.oulu.fi/~laurirai/www/css/middle/


-

Lauri Raittila< http://www.iki.fi/lr> < http://www.iki.fi/zwak/fonts>

Utrecht，NL。


" pieter blomme" < BL ********** @ hotmail.com>在消息中写道

news：5f ************************** @ posting.google.c om ...

我正在建立一个关于Java（编程语言）的网站。问题是
我使用了图层（div）。我想在这些图层中创建一个标题，然后垂直地将其打开。但这并不是为了工作。
我就是这样做的：

< html>
< head>
< ; title> De programmeertaal Java< / title>
< style>
h1 {font-size：50; font-family：Times New Roman; text-align：center;}
< / style>
< / head>
< body>
< div id =" logo"风格= QUOT;位置：绝对的;能见度：继承;
宽度：250px;身高：250px;
左：5;前5; z-index：4;
background-image：url（''logo_background.png''）">
< img src =" javalogo.png">< / img>
< / div>

< div id =" header"风格= QUOT;位置：绝对的;能见度：继承;
宽度：740px;身高：200px;
左：255;前5; z-index：2;
background-image：url（''header_background.png''）">
< h1> De programmeertaal Java< / h1>
< / div>

< / body>
< / html>

有人有个主意吗？

谢谢，
Blomme Thomas




在下面我将h1移动到名为logo的div中，我也在h1中删除了

50风格，你没有指定单位，它看起来太大了

适合div没有包装。见下文：

祝你好运，

我


< html>

< head> ;

< title> De programmeertaal Java< / title>

< style>

h1 {font-family：" Times New罗马英寸; text-align：center;}

< / style>

< / head>

< body>

< div id =" logo"风格= QUOT;位置：绝对的;可见性：继承;

宽度：250px;身高：250px;

左：5;前5; z-index：4;

background-image：url（''logo_background.png''）">

< img src =" javalogo.png" ;>< img>

< h1> De programmeertaal Java< / h1>< / div>


< div id ="报头QUOT;风格= QUOT;位置：绝对的;能见度：继承;

宽度：740px;身高：200px;

左：255;前5; z-index：2;

background-image：url（''header_background.png''）"> < / div>


< / body>

< / html>


I''m making a site about Java(programming language). The problem is
that I worked with layers(div). I wanted to make a title in 1 of
these layers and ceter this vertically. But this doesn''t look to
work.
This is how I did it:

<html>
<head>
<title>De programmeertaal Java</title>
<style>
h1 {font-size:50; font-family:Times New Roman; text-align:center;}
</style>
</head>
<body>
<div id="logo" style="position:absolute; visibility:inherit;
width:250px; height:250px;
left:5; top:5; z-index:4;
background-image:url(''logo_background.png'')">
<img src="javalogo.png"></img>
</div>

<div id="header" style="position:absolute; visibility:inherit;
width:740px; height:200px;
left:255; top:5; z-index:2;
background-image:url(''header_background.png'')">
<h1>De programmeertaal Java</h1>
</div>

</body>
</html>

Somebody has got an idea?

Thanks,
Blomme Thomas

解决方案

pieter blomme wrote:

The problem is that I worked with layers(div). I wanted to make a title
in 1 of these layers and ceter this vertically. But this doesn''t look to
work.
Your technique appears to be based on guesswork as to what font size the
text will end up as. You can''t know this for sure, so its bound to fail.

The simple way is:

#container { display: table-cell; vertical-align: middle; }

.... but Internet Explorer doesn''t support this. If you can afford to have
your style ignored by that overly common user-agent, then that''s the way to
go about it. Otherwise, you''re rather stuck.
h1 {font-size:50; font-family:Times New Roman; text-align:center;}
You need to validate your CSS. 50 what? You should probably read
http://css-discuss.incutio.com/?page=FontSize too.
left:5; top:5; z-index:4;
More syntax errors
<img src="javalogo.png"></img>



The alt attribute is required, the </img> tag violates the HTML
compatability guidelines.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is


in comp.infosystems.www.authoring.stylesheets, pieter blomme wrote:

ce[n]ter this vertically



http://www.student.oulu.fi/~laurirai/www/css/middle/

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.


"pieter blomme" <bl**********@hotmail.com> wrote in message
news:5f**************************@posting.google.c om...

I''m making a site about Java(programming language). The problem is
that I worked with layers(div). I wanted to make a title in 1 of
these layers and ceter this vertically. But this doesn''t look to
work.
This is how I did it:

<html>
<head>
<title>De programmeertaal Java</title>
<style>
h1 {font-size:50; font-family:Times New Roman; text-align:center;}
</style>
</head>
<body>
<div id="logo" style="position:absolute; visibility:inherit;
width:250px; height:250px;
left:5; top:5; z-index:4;
background-image:url(''logo_background.png'')">
<img src="javalogo.png"></img>
</div>

<div id="header" style="position:absolute; visibility:inherit;
width:740px; height:200px;
left:255; top:5; z-index:2;
background-image:url(''header_background.png'')">
<h1>De programmeertaal Java</h1>
</div>

</body>
</html>

Somebody has got an idea?

Thanks,
Blomme Thomas



In the following I moved h1 into the div named logo, I also got rid of the
50 in the h1 style, you didn''t specify the units and it looked too big to
fit in the div without wrapping. See below:
Good Luck,
me

<html>
<head>
<title>De programmeertaal Java</title>
<style>
h1 {font-family:"Times New Roman"; text-align:center;}
</style>
</head>
<body>
<div id="logo" style="position:absolute; visibility:inherit;
width:250px; height:250px;
left:5; top:5; z-index:4;
background-image:url(''logo_background.png'')">
<img src="javalogo.png"><img>
<h1>De programmeertaal Java</h1></div>

<div id="header" style="position:absolute; visibility:inherit;
width:740px; height:200px;
left:255; top:5; z-index:2;
background-image:url(''header_background.png'')"> </div>

</body>
</html>


这篇关于垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发语言最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆