0

header {
  display: flex;
  justify-content: space-between;
}

nav {
  display: flex;
  text-align: right;
  align-items: center;
}

body {
  font-size: 20px;
  margin: 0px;
  justify-content: center;
}

.logo {
  text-align: left;
  align-items: center;
}

.menu {
  margin-left: 10px;
}

a {
  text-decoration: none;
  color: #000000;
}

.welcome {
  background-color: #76a5d5;
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome .p1 {
  font-size: 40px;
}

main {
  width: 1200px;
  background-color: #76a5d5;
  margin: 10px;
  display: flex;
  justify-content: center;
}

main>.item {
  flex: none;
  width: 580px;
  height: 50px;
  margin: 10px;
  background-color: #000000;
}
<header>
  <div class="logo">My Website</div>
  <nav>
    <div class="menu">
      <a class="navitem_text" href="##">item1</a>
    </div>
    <div class="menu">
      <a class="navitem_text" href="##">item2</a>
    </div>
    <div class="menu">
      <a class="navitem_text" href="##">item3</a>
    </div>
    <div class="menu">
      <a class="navitem_text" href="##">item4</a>
    </div>
  </nav>
</header>
<div class="welcome">
  <div class="p1">Welcome to MyHome</div>
</div>
<main>
  <div class="item">
  </div>
</main>

hi I just started learning coding.I wanted to create a rwd page.Now I'm facing a problem is that I want to move my main area to the center of the page but I couldn't do it. I've tried to add display:flex to body. But everything would move. Should I add a div in the main? Can't figure it out. What should i do now? Here's the code.Thanks

Gerard
  • 15,418
  • 5
  • 30
  • 52
Warren Hogan
  • 61
  • 7

3 Answers3

1

You want to center the main element right?

main{
 width: 1200px;
 background-color: #76a5d5;
 /*See here 10px will be used for top and bottom and for left and right
 it will automatically divide equally both sides using auto.
  */
 margin: 10px auto;
 display: flex;
 justify-content: center;
}

Try replacing this ruleset in your css.

Piyush Pranjal
  • 414
  • 4
  • 11
0

Using auto for the left and right margin gives the desired result.

header {
  display: flex;
  justify-content: space-between;
}

nav {
  display: flex;
  text-align: right;
  align-items: center;
}

body {
  font-size: 20px;
  margin: 0px;
  justify-content: center;
}

.logo {
  text-align: left;
  align-items: center;
}

.menu {
  margin-left: 10px;
}

a {
  text-decoration: none;
  color: #000000;
}

.welcome {
  background-color: #76a5d5;
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome .p1 {
  font-size: 40px;
}

main {
  width: 1200px;
  background-color: #76a5d5;
  margin: 10px auto;
  display: flex;
  justify-content: center;
}

main>.item {
  flex: none;
  width: 580px;
  height: 50px;
  margin: 10px;
  background-color: #000000;
}
<header>
  <div class="logo">My Website</div>
  <nav>
    <div class="menu">
      <a class="navitem_text" href="##">item1</a>
    </div>
    <div class="menu">
      <a class="navitem_text" href="##">item2</a>
    </div>
    <div class="menu">
      <a class="navitem_text" href="##">item3</a>
    </div>
    <div class="menu">
      <a class="navitem_text" href="##">item4</a>
    </div>
  </nav>
</header>
<div class="welcome">
  <div class="p1">Welcome to MyHome</div>
</div>
<main>
  <div class="item">
  </div>
</main>
Gerard
  • 15,418
  • 5
  • 30
  • 52
0

Answer

You can do this with CSS align-self property.

First, we need give the <body> display flex and set the direction to column (vertical).

body {
    font-size: 20px;
    margin: 0px;
    display: flex;
    flex-direction: column; /* this change the direction to vertical */
}

then change the main area to center

main {
    width: 1200px;
    background-color: #76a5d5;
    margin: 10px;
    align-self: center; /* this move the element to center */
}

Demo

header{
    display: flex;
    justify-content: space-between;
}
nav{
    display: flex;
    text-align: right;
    align-items: center; 
}
body{
    font-size: 20px;
    margin: 0px;
    display: flex;
    flex-direction: column;
}
.logo{
    text-align: left;
    align-items: center;
}
.menu{
    margin-left: 10px;
}
a{
    text-decoration: none;
    color:#000000;
}
.welcome{
    background-color: #76a5d5;
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;

}
.welcome .p1{
    font-size: 40px;
}
main{
    width: 1200px;
    background-color: #76a5d5;
    margin: 10px;
    align-self: center;
}
main>.item{
    flex: none;
    width: 580px;
    height: 50px;
    margin: 10px;
    background-color: #000000;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=divice-width, initial-scale=1">
        <link rel="stylesheet" href="RWDstyle.css"/>
        <title>RWD test</title>
    </head>
    <body>
        <header>
            <div class="logo">My Website</div>
            <nav>
                <div class="menu">
                    <a class="navitem_text" href="##">item1</a>
                </div>
                <div class="menu">
                    <a class="navitem_text" href="##">item2</a>
                </div>
                <div class="menu">
                    <a class="navitem_text" href="##">item3</a>
                </div>
                <div class="menu">
                    <a class="navitem_text" href="##">item4</a>
                </div>
            </nav>
        </header>
        <div class="welcome">
            <div class="p1">Welcome to MyHome</div>
        </div>
        <main> 
            <div class="item">

            </div>

        </main>
        

    </body>
</html>
syahid246
  • 109
  • 2
  • 7