Fatal编程技术网
  • html/
  • Html 将列表中的4个图像与包装器对齐到页面中心

Html 将列表中的4个图像与包装器对齐到页面中心

html css

Html 将列表中的4个图像与包装器对齐到页面中心,html,css,html-lists,Html,Css,Html Lists,我真的是一个新的HTML和工作的项目，需要完成今天。在这里，我想要4张图片水平排列在页面中心，背面为白色 <!DOCTYPE html> <html> <head> <title>Welcome to Food Court</title> <link rel="stylesheet" href="normalize.css"> <link rel="stylesheet" hr

我真的是一个新的HTML和工作的项目，需要完成今天。在这里，我想要4张图片水平排列在页面中心，背面为白色

         <!DOCTYPE html>
<html>
<head>
    <title>Welcome to Food Court</title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="style2.css">
</head>
<body>

    <div id="wrapper">

    <div class="navigation" >

            <ul>
                <li>
<a href="myfile.htm"><img src="images/fb.png" alt="Smiley face" height="150px"width="150px"></a>

        </li>


                <li>
                <a href="myfile.htm">   <img src="images/Parking.png" alt="Smiley face" height="150px"width="150px"> </a>
                </li>


                <li>
                <a href="myfile.htm"><img src="images/signage.png" alt="Smiley face" height="150px"width="150px"></a>
                </li>
        <li>
        <a href="myfile.htm"><img src="images/ticketing.png" alt="Smiley face" height="150px"width="150px"></a>
                </li>



</ul>   

</div>
</div>

</body>
</html>
我在这里面临的问题是页面没有完全对齐页面的中心。此外，如果需要白色背景，我还必须对包装使用与导航相同的属性。但在某个地方，事情搞砸了，我没有真正得到预期的输出，正如你从下面的小提琴中看到的那样

图像没有从包装器div的开始对齐，而是留出了空间

我需要有4个图像的列表，正好放在页面的中心，背面是白色

如果有人能指导我这里到底要干什么，那将是非常有帮助的

因为我没有选择了，所以我别无选择，只能在这里寻求帮助。提前谢谢

请找到下面的小提琴链接

检查此选项，您可以使用绝对中心类将子内容与中心对齐。还请注意，您的html ui语法中有一些错误，我在示例中修复了这些错误

.absolute-center{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
为了使它们水平对齐，您可以使用包装器进行此操作。大部分都归功于保罗

#wrapper{ 
     background:red;

     width:900px;
     height:300px;
     top:0;
     left:0;
     bottom:0;
     right:0;
     margin:auto;
     position:absolute;     
 }

您的html结构乱七八糟。您在
li
外有一个
a
标记，您有一个打开的
li
标记，但没有关闭标记，您应该先修复这些。抱歉。我们刚刚完成了这项工作并更新了代码。不过，不知何故，第一张图片在开始在包装内对齐之前留下了一些空间。谢谢你的帮助，保罗！我可以看到两个div都没有对齐到页面的中心！有没有办法做到这一点？如果你想让它们与我在这里修改的JSFIDLE页面的中心对齐。如果它能满足你的需要，请告诉我谢谢你，保罗。最后一个问题。。包装的背景色没有完全展开。如果我给宽度=900px。。我需要900px在两边均匀分布。。请让我知道我该如何处理这件事。。再次感谢你的帮助！！我不明白你所说的“包装的背景色没有完全展开”是什么意思。发布的示例是水平和垂直完全对齐的。请注意#包装器是包含div.navigation（白色背景）的红色容器，其中包含ui>li。如果你能澄清你的观点，我将很高兴为你辩护！对不起，我想我现在才明白你的意思，#包装器左对齐？我已经用margin修复了它：auto；这里是更新。让我知道，如果我们现在同步，你可以用任何方式的评论！我需要50个代表来评论，否则我会的。哦，我明白了。没关系。我想你已经尽力了。对此我很抱歉 
#wrapper{ 
     background:red;

     width:900px;
     height:300px;
     top:0;
     left:0;
     bottom:0;
     right:0;
     margin:auto;
     position:absolute;     
 }