除浮动以外的HTML div像素偏移量

Question

我很想学html。我想在另一个块中建立一个块。我想让这个块距现有块的每边都有20像素的距离我想让它离现有块的顶部有100像素的距离。

我知道符合此规范的div块的大小为1160 * 480像素块。在设计布局之前，我正在寻找和假设存在的是某种"center"属性，我可以在页面上使用，这样就可以神奇地将其置于现有结构的中心。遗憾的是，我找不到这样的属性。

我想知道你们是否能帮我。除了浮动属性之外，是否有一些方法可以对齐或偏移块的像素位置?

在一个旁注，是否有一些网站列出所有的属性与所有的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>

Answer 1

我不清楚您想要的功能。然而，这里有两种方法可以让你的内框居中。

---

方法1

如果你想让内框距其容器顶部100px，每边20px，你可以简单地删除内框的宽度(和高度，如果你喜欢)设置，并配置它的边距:

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

小提琴

---

方法2

由于您知道内外盒的尺寸，因此可以将内盒的top设置为"50%"，并将负margin-top设置为盒子高度的一半。这将使内框垂直居中。然后将margin-left和margin-right设置为"auto"，水平居中:

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/

注:我将Ticker block的ID重命名为ticker_block，因为带有空格的ID无效:

来自HTML 4规范:

ID和NAME令牌必须以字母([a- za -z])开头，并且可以是后面跟着任意数目的字母、数字([0-9])、连字符("-")、下划线("_"),冒号(":")和时间("。")。

Answer 2

你可以使用CSS来水平居中，像这样:

text-align:中心;

但是，这不会让你得到你想要的垂直居中