Question

我厌倦了学习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>

Answer 1

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

text-align：center;

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

Answer 2

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

方法1

如果你想让内盒从容器顶部100px并从每侧20px，你可以简单地从内盒中删除宽度（和高度，如果你喜欢）设置并配置它的边距：

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

FIDDLE

方法2

由于你知道内盒和外盒的尺寸，你可以将内盒的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%;
}

FIDDLE

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

P.S。我将Ticker block的ID重命名为ticker_block，因为带空格的ID无效：

来自HTML 4 specification：

ID和NAME令牌必须以字母（[A-Za-z]）开头，可能是后跟任意数量的字母，数字（[0-9]），连字符（“ - ”），下划线（“_”），冒号（“：”）和句点（“。”）。

html除了float之外的div像素偏移量

2 个答案: