How do I move a div and its contents to the middle

Question

I'm attempting to make the button and text be next to each other but I need it to be centered. align="center" does not work either for me.

function flee() {
  console.log("flee");
}

body {
  background-color: powderblue;
}

.p1 {
  color: blue;
  border-bottom: 5px solid black;
  margin: 0;
}

.p2 {
  color: red;
  margin: 0;
  padding-top
}

.label1 {
  color: black;
}

.footer-nav {
  align-items: center;
  display: flex;
}

.wrap {
  display: block;
  align-items: center
}

.button1 {
  background-color: green;
  color: powderblue;
  border-width: 0;
  margin-left: 50px;
}

<p class="p1" align="center">
  <font size="10">Welcome To Plieaxploits!</font>
</p>
<p class="p2" align="center">
  <font size="5">We Are The Home Of Roblox Exploits!</font>
</p>
<p class="p1" align="center">
  <font size="3.5">Simply Click The Button Next To The Script You Want And CLick Skip AD!</font>
</p>

<div class="footer-nav" align="center">
  <p class="label1">
    <font size="4" face="cursive">Flee The Facility GUI</font>
  </p>
  <button class="button1" onclick="flee()">
    <font size="4" face ="cursive">GO!</font>
  </button>
</div>

score 0 · Answer 1 · answered Sep 02 '18 at 18:03

.p1 {
  color: blue;
  border-bottom: 5px solid black;
  margin: 0;
}

.p2 {
  color: red;
  margin: 0;
  padding-top
}

.label1 {
  color: black;
}

.footer-nav {
  align-items: center;
  display: flex;
  justify-content: center;
}

.wrap {
  display: block;
  align-items: center
}

.button1 {
  background-color: green;
  color: powderblue;
  border-width: 0;
  margin-left: 50px;
}

<head>
  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</head>

<body style="background-color:powderblue;">

  <p class="p1" align="center">
    <font size="10">Welcome To Plieaxploits!</p>
  <p class="p2" align="center">
    <font size="5">We Are The Home Of Roblox Exploits!</p>
  <p class="p1" align="center">
    <font size="3.5">Simply Click The Button Next To The Script You Want And CLick Skip AD!</font>
  </p>

  <div class="footer-nav">
    <p class="label1">
      <font size="4" face="cursive">Flee The Facility GUI</font>
    </p>
    <button class="button1" onclick="flee()"><font size="4" face ="cursive">GO! </font>
    </button>
  </div>
</body>

score -1 · Answer 2 · answered Sep 02 '18 at 17:04

-1

You can just add style="justify-content: center;" inside the footer-nav div. Here an example

answered Sep 02 '18 at 17:04

SyamsulMJ

39
2

score -2 · Answer 3 · answered Sep 02 '18 at 17:19

-2

With flexbox you just need to set margin:auto for each child element You want be centered. http://www.cssdesk.com/mDkz5

answered Sep 02 '18 at 17:19

Julia Ropoulos

23
8

How do I move a div and its contents to the middle

3 Answers3