时间戳

首页 > 解决方案 > 如何使三个内联居中

另一个内部的元素

html - 如何使三个内联居中
另一个内部的元素

问题描述

我有一个包含三个内联元素的页面。现在我想让所有这些元素在页面内居中。我试过了align-content: center;，margin-left: auto;, margin-right: auto;我能做到吗？

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

索引.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;
}

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

标签： htmlcss

解决方案

您的问题是由拼写错误引起的。不是body div .content {，是body div.content {。我修复了这个并改变了.content宽度，所以效果会在片段中可见。您可以自由调整。

body div .content {意思是“里面的.content类”，divbody

当你想要...

body div.content {, 翻译为'里面div有类'。.contentbody

更新

根据 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>

推荐阅读