Question

我正在制作this site并在第二页上工作。但是，在整个视口中使组件居中时，我遇到了麻烦。我搜索了许多解决方案，包括position，display:table等。但是，我不知道如何在这种情况下使用。

.header {
    background-color: #F7F7F7;
    padding: 15px;
}

.header h1 {
    float: left;
}

.header h1 img {
    display: block;
}

.header__nav {
    float: right;
}

.header__nav li {
    float: left;
    display: flex;
    align-items: center;
    height: 38px;
}

.header__nav li a {
    margin-right: 39px;
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    transition: all 0.5s;
}

.header__nav li a::after {
    content: '';
    width: 0;
    height: 2px;
    background-color: black;
    transition: 0.3s;
    display: block;
}

.header__nav li a:hover::after {
    width: 100%;
}

.header__nav li button:hover::before {
    width: 100%;
}

.contents {
    padding: 150px 100px;
}

.contents__inside {
    font-family: 'Playfair Display', serif;
    text-align: center;
    font-size: 1rem;
}

.contents__inside strong {
    font-style: italic;
    font-size: 1rem;
}

.contents__inside h2 {
    margin-bottom: 10px;
    font-size: 6rem;
    font-weight: bold;
    line-height: 1;
}

.contents__inside img {
    width: 100%;
}

.contents__inside p {
    max-width: 860px;
    font-size: 1.7rem;
    font-weight: 400;
    margin: 0 auto;
}

.info__inside {
    font-family: 'Playfair Display', serif;
    text-align: center;
    font-size: 1rem;
}

.info__inside h2 {
    margin-bottom: 30px;
    font-size: 4rem;
    font-weight: bold;
    line-height: 1;
}

.info__inside p {
    max-width: 860px;
    font-size: 1.7rem;
    font-weight: 400;
    margin: 0 auto 100px;
}

.info__inside img {
    width: 100%;
}

.footer {
    background-color: blue;
}

<header class="header clearfix">
    <div class="l-wrapper">
        <h1><a href="#"><img src="https://pixelicons.com/wp-content/themes/pexelicons/assets/pic/site-logo/logo.png" alt="Logo"></a></h1>
        <nav class="header__nav">
            <ul class="clearfix">
                <li><a href="#">View icons</a></li>
                <li><a href="#">Buy now</a></li>
                <li><button class="menu">menu</button></li>
            </ul>
        </nav>
    </div>
</header>
<section class="contents">
    <div class="l-main">
        <div class="contents__inside">
            <strong>Top quality</strong>
            <h2>ICONS</h2>
            <p>6,500 unique icons in different categories. 
                Drawn by hand and designed for perfection.</p>
            <img src="https://pixelicons.com/wp-content/uploads/2018/01/Home_slide_space.png" alt="">
        </div>
    </div>
</section>
<section class="info">
    <div class="l-main">
        <div class="info__inside">
            <h2>Thousands of icons</h2>
            <p>6,500 unique icons in 3 style color, line and solid.</p>
            <img src="https://pixelicons.com/wp-content/uploads/2018/01/Preview_rd_2.png" alt="">
        </div>
    </div>
</section>
<footer class="footer">
</footer>

是否有解决此问题的适当方法？如何实现网站的原始设计？

编辑

我不想使用CSS3属性来练习CSS2

IMAGE that I wanna fix

如何将组件对准整个页面的中心？

0 个答案: