Question

我试图使按钮和文本彼此相邻，但是我需要将其居中。 align="center"也不适合我。

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>

Answer 1

.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>

Answer 2

您可以在style="justify-content: center;" div内添加footer-nav。 Here an example

Answer 3

使用flexbox时，您只需要为每个要居中的子元素设置margin：auto即可。 http://www.cssdesk.com/mDkz5

如何将div及其内容移动到中间

3 个答案: