Html 如何将三条直线居中<；部门>；另一个内部的元素<；部门>；_Html_Css

Html 如何将三条直线居中<；部门>；另一个内部的元素<；部门>；

html css

Html 如何将三条直线居中<；部门>；另一个内部的元素<；部门>；,html,css,Html,Css,我有一个有三个内联元素的页面。现在我想让所有这些元素都位于页面的中心。我尝试了align content:center和左边距：自动；，右边距：自动我能做到这一点吗 index.php： <?php include_once 'header.php'; ?> <!DOCTYPE html> </html> <head> <link rel="stylesheet" type="text/css" href="i

我有一个有三个内联元素的页面。现在我想让所有这些元素都位于页面的中心。我尝试了

align content:center和左边距：自动；，右边距：自动我能做到这一点吗
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>

需要更多的文本。需要更多的文本。需要更多的文本。需要更多的文本。需要更多的文本。需要更多的文本。需要更多的文本。需要更多文本。
您的问题是由打字错误引起的。它不是body div.content{
，而是body div.content{
。我修复了这个问题，并更改了。content
宽度，以便在代码段中可以看到效果。您可以自由调整它
body div.content{
表示“.content
类内div
内body
”
当你想
body div.content{
，它转换为“div
，类为.content
，内部为body
”
更新
在OP的请求下，我还添加了一个规则，要求图像具有父div宽度的75%

.atom图像{
宽度：75%；
}
#点击器，
#升级，
#修饰语{
宽度：30%；
高度：500px；
背景色：#09a1a8；
边框样式：实心；
边框宽度：2倍；
边框颜色：#000；
文本对齐：居中；
保证金：4倍；
浮动：左；
}
#升级按钮{
宽度：100px；
高度：20px；
保证金：自动；
}
#升级文本{
保证金：自动；
}
#修改器按钮{
宽度：100px；
高度：20px；
保证金：自动；
利润上限：10px
}
身体{
背景色：#1E；
}
div.inline{
浮动：左；
}
标题导航主包装{
背景色：#09a1a8；
宽度：100%；
高度：40px；
}
标题导航格式{
浮动：对；
边缘顶部：10px；
右边距：10px；
}
标题导航表格a{
文字装饰：无；
颜色：#000；
}
标题导航ul{
浮动：左；
列表样式类型：无；
}
标题nav ul li a{
文字装饰：无；
颜色：#000；
}
正文部分内容{
宽度：500px；
左边距：自动；
右边距：自动；
自对准：居中；
}


原子数：0


升级
文本
购买
元素
游标：0
成本：10

我看不到您要对齐的div的父级是flexbox div。如果没有，您将无法使用align。然后，我将在父级上设置属性justify content:space around。
谢谢！另外，我如何将图像W设置为div的75%，而不是原始图像W的75%？我已更新了我的片段。删除了图像dHTML中的维度，在图像中添加了atom image
类，并添加了一条CSS规则（.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: 100000px;
    margin-left: auto;
    margin-right: auto;
    align-self: center;
}