Question

我有一个包含三个内联元素的页面。现在，我希望所有这些元素都位于页面内部。我已经尝试过align-content: center;和margin-left: auto;, margin-right: auto;吗？

index.php：

<?php
    include_once 'header.php';
?>
<!DOCTYPE html>
</html>
    <head>
        <link rel="stylesheet" type="text/css" href="index.css" />
        <title></title>
    </head>
    <body>
        <div class="content">
            <div class="inline" id="clicker">
                <br> Atoms: <span id="atoms">0</span>
                <br>
                <input type="image" 
    src="https://theatomandperiodictable.wikispaces.com/file/view/220px-Stylised_Lithium_Atom.svg.png/297637780/220px-Stylised_Lithium_Atom.svg.png" onClick="atomClick()" width="240" height="249">
            </div>

            <div class="inline" id="upgrades">
                <b>upgrades</b>
                <b>text</b>
            </div>

            <div class="inline" id="modifiers">
                <button onClick="buyElement()" id="BuyElement">Buy 
    Element</button><br />
                Cursors: <span id="elements">0</span><br />
                Cost: <span id="elementCost">10</span>
            </div>
        </div>
        <br class="clearBoth" />
        <script type="text/javascript" src="index.js"></script>
    </body>
</html>

index.css：

#clicker, #upgrades, #modifiers {
    width: 30%;
    height: 500px;
    background-color: #09a1a8;
    border-style: solid;
    border-width: 2px;
    border-color: #000;
    text-align: center;
    margin: 4px;
    float: left;
}

#upgrades button {
    width: 100px;
    height: 20px;
    margin: auto;
}

#upgrades text {
    margin: auto;
}


#modifiers button {
    width: 100px;
    height: 20px;
    margin: auto;
    margin-top: 10px
}

 body {
    background-color: #1e1e1e;
 }

div.inline {
    float:left;
}

header nav .main-wrapper {
    background-color: #09a1a8;
    width: 100%;
    height: 40px;
}

header nav form {
    float: right;
    margin-top: 10px;
    margin-right: 10px;
}

header nav form a {
    text-decoration: none;
    color: #000;
}

header nav ul {
    float: left;
    list-style-type: none;
}

header nav ul li a {
    text-decoration: none;
    color: #000;
}

body div .content  {
    width: 100000px;
    margin-left: auto;
    margin-right: auto;
    align-self: center;
}

需要更多文本。需要更多文字。需要更多文字。需要更多文字。需要更多文字。需要更多文字。需要更多文字。需要更多文字。

Answer 1

您的问题是由错字引起的。不是body div .content {，而是body div.content {。我已修复此问题并更改了.content的宽度，因此效果在摘要中可见。您可以自由调整。

body div .content {的意思是'.content内部div内部的body类，

在您想要的时候...

body div.content {，它转换为div内类为.content的'body。

更新

应OP的要求，我还为图像添加了规则，使其具有父级div宽度的75％。

.atom-image {
  width: 75%;
}

#clicker,
#upgrades,
#modifiers {
  width: 30%;
  height: 500px;
  background-color: #09a1a8;
  border-style: solid;
  border-width: 2px;
  border-color: #000;
  text-align: center;
  margin: 4px;
  float: left;
}

#upgrades button {
  width: 100px;
  height: 20px;
  margin: auto;
}

#upgrades text {
  margin: auto;
}

#modifiers button {
  width: 100px;
  height: 20px;
  margin: auto;
  margin-top: 10px
}

body {
  background-color: #1e1e1e;
}

div.inline {
  float: left;
}

header nav .main-wrapper {
  background-color: #09a1a8;
  width: 100%;
  height: 40px;
}

header nav form {
  float: right;
  margin-top: 10px;
  margin-right: 10px;
}

header nav form a {
  text-decoration: none;
  color: #000;
}

header nav ul {
  float: left;
  list-style-type: none;
}

header nav ul li a {
  text-decoration: none;
  color: #000;
}

body div.content {
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  align-self: center;
}

<!DOCTYPE html>

</html>

<head>
  <link rel="stylesheet" type="text/css" href="index.css" />
  <title></title>
</head>

<body>
  <div class="content">
    <div class="inline" id="clicker">
      <br> Atoms: <span id="atoms">0</span>
      <br>
      <input type="image" class="atom-image" src="https://theatomandperiodictable.wikispaces.com/file/view/220px-Stylised_Lithium_Atom.svg.png/297637780/220px-Stylised_Lithium_Atom.svg.png" onClick="atomClick()">
    </div>

    <div class="inline" id="upgrades">
      <b>upgrades</b>
      <b>text</b>
    </div>

    <div class="inline" id="modifiers">
      <button onClick="buyElement()" id="BuyElement">Buy 
    Element</button><br /> Cursors: <span id="elements">0</span><br /> Cost: <span id="elementCost">10</span>
    </div>
  </div>
  <br class="clearBoth" />
  <script type="text/javascript" src="index.js"></script>
</body>

</html>

Answer 2

我看不到要对齐的div的父级是flexbox div。如果没有，您将无法使用align。然后，我将在父级上设置属性justify-content：space-around。

如何在另一个<div>

2 个答案:

更新