CODEWITHSUNDEEP
htmlcss
ximing
ximing

Reputation: 21

Set the text-align to be center from css not working

This is the html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ximing's page</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
    <header>
        <h2>Mountain Travel</h2>
        <nav>
            <ul>
            <li><a href="#">Tour</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <section class="introduction">
    <div class="background-image" style="background-image: url(assets/image/main.jpg);" >
    </div>
    <div class="content-area">
            <h1>Blue Ridge Mountain</h1>
            <h3 class="hike">Hello every hiker! </h3>
            <h3>Welcome to Blue Ridge Mountain and begin to explore your journey now!</h3>
            <a href="#" class="btn">Contact Us Now</a>
    </div>
  </section>
  <section class="destination">
    <h3 class="title">Some of our destinations:</h3>
    <p>Tired of boring dramas? Are the plains too plain? Come and join our journey in Blue Ridge Mountains! Here are some pictures from people who had great experience in the mountains with us. </p>
  <hr>

</section>
</body>
</html>

This is the related css:

section h3.title{
    text-transform: capitalize;
    font:bold 32px "Open Sans",sans-serif;
    /*margin-bottom:;*/
    text-align:center;
}
section p{
    max-width: 775px;
    line-height: 2;
    padding:0 20px;
    /*margin-bottom: */
    text-align:center;
}

The title and the text under p tag should all be center when I link the css file. However, only the title could be set center. The text under tag p is still not center. Could anyone tell me what's wrong with it?

Upvotes: 0

Views: 67

Answers (2)

Murtaza JAFARI
Murtaza JAFARI

Reputation: 734

This may work or you can give width

width: 100%;

or

h3.title {
   display: block;
   text-align: center;
}

Upvotes: 0

Nermin
Nermin

Reputation: 935

section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

The text inside the p tag is centered, but the p-container itself was not.

Upvotes: 3

Related Questions