Question

所以我试图重新创建这个模板进行练习：

https://blackrockdigital.github.io/startbootstrap-agency/

我有代码的codepen链接。我希望没关系：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Start Bootstrap</title>
    <!-- <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> -->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">Start Bootstrap</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#team">Team</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>

        <div id = "welcome">
            <h2>Welcome to our Studio!</h2>
            <h1>It's nice to Meet you!</h1>

            <button>Tell me More</button>
        </div>
    </header>

    Services
    Lorem ipsum dolor sit amet consectetur.

<div class = "row">
   <div class = "col">
       <h3>Features</h3>
   </div>
   <div class = "col">
       <h3>Easy to Learn and Design</h3>
   </div>
   <div class = "col">
       <h3>Boostrap 3</h3>
</div>
       </div>
</body>
</html>

html, header {
    height: 100%;
}
header {
    background-image: url(/portfolio-practice/img/flowers.jpg);
    background-size: cover; 
    background-repeat: no-repeat;
    height: 100vh;
}

 header h1, h2 {
   /* text-align: center;
    vertical-align: middle;
    line-height: 90px; */
}

button {
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    background-color: #fed136;
    border-color: black;
    border-radius: 2px;
    color: black;
    border-style: solid;
    padding: 10px;
    font-family:sans-serif, 'Comic sans';

}

#welcome {
    display: flex;
     align-items: center;
  justify-content: center;
}

nav {
    background: #212529;
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
    width: 100%;
    top: 0;
}

li {
    display: inline-block;
    margin-left: 15px;
}

我设法在没有Flexbox之前将文本与已注释掉的代码对齐，但我被告知我必须使用flexbox按钮才能在中心对齐。这是真的？如果是这样，我如何让它正常工作？自从我使用了flexbox以来已经有一段时间了。使用绝对定位会更容易吗？

我想要的是将h1，h2和按钮分别放在一个新行上。我该怎么办？

Answer 1

您需要设置flex-direction: column。请按照下面的id='welcome'更新您的css，

#welcome {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column
}

如何将文本和按钮与CSS中心对齐？

1 个答案: