时间戳

首页 > 解决方案 > 文本不会在 flexbox 上方的页面上居中

html - 文本不会在 flexbox 上方的页面上居中

问题描述

无论我在 CSS 中使用什么，我似乎都无法让我的标题和下面的任何内容居中。任何帮助，将不胜感激！

<div class="title"><h1>Places to Stay</h1></div>
<div id ="imageContainer">
<img src="../assets/images/barcelona.jpg" alt="barcelona image" width="300" height="300">
<!--img src="https://www.klm.com/destinations/gb/en/europe/spain/barcelona"-->
<img src="../assets/images/milan.jpg" alt="milan image" width="300" height="300">
<!--img src="https://www.timeout.com/milan-->
<img src="../assets/images/paris.jpg" alt="paris image" width="300" height="300">
<!--img src="https://www.archdaily.com/922278/23-places-in-paris-every-architect-must-visit"-->
</div>

CSS

/*This comment is for id imageContainer. It sets a display as flex in a row and spaces it evenly*/
#imageContainer {
    display:flex;
    flex-direction: row;
    justify-content: space-evenly;
}

/*This is a comment for the id "title", it sets titles to a different size and centers it*/
.title {
    font-size: 3em;
    text-align: center;
    padding: 1px 2px 1px 5px;
}

标签： htmlcss

解决方案

它在我这边工作得很好，但你可以在 css 中分隔 h1 h2 和 p。

#imageContainer {
    display:flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.title {
    font-size: 3em;
    text-align: center;
    padding: 1px 2px 1px 5px;
}
h1, h2, p {
    font-size: 3em;
    text-align: center;
    padding: 1px 2px 1px 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Places To Stay</title>
    <meta charset="utf-8" />
    <link href="../assets/css/first.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <header>
        <img class="logo" src="../assets/images/mockz.jpg" alt="Mockz logo" />
    </header>
    <nav>
        <a href="http://unn-w20025751.newnumyspace.co.uk/content/homepage.php">Home</a>
    </nav>
    <main>
    <div class="title"><h1>Places to Stay</h1></div>
        <div id ="imageContainer">
                <img src="../assets/images/barcelona.jpg" alt="barcelona image" width="300" height="300">
                <!--img src="https://www.klm.com/destinations/gb/en/europe/spain/barcelona"-->
                <img src="../assets/images/milan.jpg" alt="milan image" width="300" height="300">
                <!--img src="https://www.timeout.com/milan-->
                <img src="../assets/images/paris.jpg" alt="paris image" width="300" height="300">
                <!--img src="https://www.archdaily.com/922278/23-places-in-paris-every-architect-must-visit"-->
        </div>
        <h2>Barcelona, Milan, Paris</h2>
        <p>Just three of the fantastic locations we have on offer here at Mockz, the coolest hotels in Europe located in the heart of
        these fantastic cities</p>
    <div class="quote"><p>“Travel is the only thing you buy that makes you richer”&lt;/p></div>
    <div class="quoteComment"><p>Here at Mockz we make sure that when you decide to travel, you do it in style</p></div>
    </main>
<footer>
<p id = "footer"><span class="important">Contact Us</span> Email: booking@mockz.com Phone: 0191 268 9999 </p>
<!--img src for the logo is my own design based on ="https://news.marriott.com/brands/moxy-hotels/"-->
</footer>
</body>

推荐阅读