html - 中心部分？-6ren

html - 中心部分？

转载作者：太空宇宙更新时间：2023-11-03 23:46:26

25

4

为什么我的“部分”没有正确居中？

我认为应该这样做:

section{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

这次出了什么问题？

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
<title>LifeSymb.com</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<section>
    <article id="intro" class="scrollBlock">
            <h1>HOMES on the WEB</h1>

            <p>WHats going on, somekinda test text
            Likely to go and whats going to happen, hoihfedfh
            Fancy scrolling is going to Happen !!!</p>
    </article>
    <article id="slide2" class="scrollBlock">
            <h2>SLIDE 2</h2>

            <a href="http://google.com" id="photoSlide2"><img src="images/block2.png" alt="" /></a>
            <p>Text TUTYUYIUYOIUOIUiihjihiohiuhiuhuhuhuohoiuhoiyuoiuy</p>
            <p class="btn"><a href="http://google.com">Vist HERE!!!</a></p>
    </article>
    <article id="dog" class="scrollBlock">
            <h2>My dog has his own website</h2>

            <p>That's right! My dog Dog has his very own website full of cute doggy photos right from being a pup.<br/>
            <strong>Check out Jake's website at <a href="http://google.com">http://google.com</a></strong></p>
    </article>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="scripts/libs/jquery.scrollorama.js"></script>
<script src="scripts/scrollScript.js"></script>
</body>
</html>

CSS:

body{
    font: 18px/30px Sans-serif;
    color: black;
    background:url('../images/bodyBG.png');
}

section{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.scrollBlock{
    width: 70%;
}

#intro{
    background: lightgreen url(../images/dragon.jpg) left no-repeat;
    /*background-size: cover;*/
}

    #intro h1{
        width: 677px; height: 122px;
        background: url(../images/btn_intro.png);
        text-indent: -9999px;
        position: relative;
        top: 145px;
        left: 0;
    }
    #intro p{
        position: relative;
        top: 200px;
        left: 350px;
        width: 508px;
        margin: 0 0 30px 0;
    }
    #intro p:nth-child(2){
        font-weight: bold;
    }


#slide2{
    background: lightpink url(../images/texture_purple.png);
}


#dog{
    background: black url(../images/dog.jpg)no-repeat;
    background-size: cover;
    padding-top: 400px;
}
    #dog h2{
        opacity: 0;
    }

最佳答案

将此添加到 CSS:

section article {margin: 0 auto;}

这意味着“将 0 垂直边距和 auto 水平边距应用到每个 article 是 section 的 child ”。 ( JSFiddle )

你的 article s 小于 section 的宽度, 所以你必须居中对齐 article也是。

关于html - 中心部分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21434007/

25

4

0

文章推荐： c - 如何将 libssh 包含到我的项目中

文章推荐： html - 2个并排的div居中？

文章推荐： jquery - 淡入下拉菜单

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

html - 中心部分？