0

我厌倦了学习html。我想在另一个里面设置一个块。我希望这个块与每侧的现有块相距 20 像素，接受我希望它距现有块顶部 100 像素的顶部。

我知道符合此规范的 div 块的大小是 1160 x 480 像素块。在设计布局之前，我正在寻找和假设存在的某种“中心”属性，我可以在上面使用它，从而神奇地将其放置在现有结构的中心。可悲的是我找不到这样的属性。

我想知道你们是否可以帮助我。除了浮动属性之外，还有什么方法可以对齐或偏移块的像素位置吗？

附带说明一下，是否有一些网站列出了与所有 html 元素关联的所有属性？

这是我的代码：

<div id="container" style="width:1600px">
        <div id="header" style="background-color:#FFA500;width:1600px;height:50px;">
            Navigation bar
        </div>

        <div id="links" style="background-color:#FFD700;height:750px;width:400px;float:left;">
            <ul>
                <li><a href="">Resume</a></li>
                <li><a href="">Portfolio</a></li>
                <li><a href="">facebook</a></li>
                <li><a href="">Linkedin</a></li>
                <li><a href="">youtube</a></li>
                <li><a href="">twitch</a></li>
            </ul>
        </div>

        <div id="Ticker Title" style="background-color:#EEEEEE;height:150px;width:1200px;float:left;">
            Title of the Ticker goes here
        </div>

        <div id="Ticker block main" style="background-color:#CCCCCC;height:600px;width:1200px;float:left;">
            Main ticker block with a cool background.
            <div id="Ticker block" style="background-color:#BBBBBB;height:480px;width:1160px;" align="center">
                Ticker that displays one of five recent event. Refreshing the cycle every 20 secs. Can't get to display correctly within ticker main
            </div>
        </div>
    </div>
4

2 回答 2

0

您可以使用 CSS 将其水平居中，如下所示：

文本对齐：居中；

但是，这不会让您获得您正在寻找的垂直居中。

于 2013-05-22T21:24:00.300 回答
0

我不清楚您想要的功能。但是，这里有两种方法可以使您的内盒居中。

方法一

如果您希望内盒距其容器顶部 100px 且距每边 20px，您可以简单地从内盒中删除宽度（和高度，如果您愿意）设置并配置其边距：

div#ticker_block {
    background-color:#BBBBBB;
    height:480px;
    margin:100px 20px 0px 20px;
}

小提琴

方法二

由于您知道内盒和外盒的尺寸，您可以将内盒设置top为“50%”，并将负数设置margin-top为盒子高度的一半。这使内盒垂直居中。然后将margin-left和设置margin-right为“自动”以使其水平居中：

div#ticker_block {
    position:relative;
    background-color:#BBBBBB;
    height:480px;
    width:1160px;
    margin:-240px auto 0px auto;
    top:50%;
}

小提琴

关于您的最后一个问题，您可以在此处找到 HTML 4 规范：http: //www.w3.org/TR/REC-html40/

PS 我将 ID 重命名为Ticker blockto ticker_block，因为带有空格的 ID 无效：

从HTML 4 规范：

ID 和 NAME 标记必须以字母 ([A-Za-z]) 开头，后跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线 ("_") , 冒号 (":") 和句点 (".")。

于 2013-05-22T22:31:47.907 回答