我想让我的Div在页面中居中,但是我无法让它正常工作。
尽管使用Margin-left:auto和Margin-Right:auto它仍然不在页面中间。
任何帮助将不胜感激!
HTML:
<div class="OuterService">
<div class="service">
<div class="virus" style="width:250px; height:218px;">
<center><h3 style="width:200px; text-align:center">Computer Virus</h3>
<img src="virus.jpg" alt="virus" height="140px"/></center>
</div>
<div class="screenRepair" style="width:250px;">
<center><h3 style="width:auto; text-align:center">Screen Replacement</h3>
<img src="smashedScreen.jpg" alt="BrokenScreen" height="160px"/></center>
</div>
<div class="hardwareRepair" style="height:218px;">
<center><h3>Hardware Replacement</h3>
<img src="hardwareRepair.jpg" alt="hardwareRepair" height="130px"/></center>
</div>
<div class="WindowsReinstall" style="height:218px;">
<center>
<h3>OS Reinstallation</h3>
<img src="windowsInstall.jpg" alt="OS Reinstallation" height="150px;" width="220px;"/>
</center>
</div>
<div class="maintenance" style="width:250px;">
<center>
<h3>System Maintenance</h3>
<img src="SystemMaintenance.jpeg" alt="System Maintenance" height=150px;/>
</center>
</div>
<div class="SoftwareRepair" style="width:250px">
<center>
<h3>Software Repair</h3>
<img src="SoftwareRepair.png" alt="Software Repair" height="150px;" width="220px;"/>
</center>
</div>
<div class="MemoryUpgrades" style="width:250px; height:208px;">
<center>
<h3>Memory Upgrades</h3>
<img src="MemoryUpgrades.jpg" alt="Memory Upgrades" height="140px;"/>
</center>
</div>
<div class="DataRecovery" style="width:250px;">
<center>
<h3>Data Recovery</h3>
<img src="DataRecovery.jpg" alt="Data Recovery" height="150px;"/>
</center>
</div>
</div>
</div>
CSS:
.outerService {
width: auto;
margin-left: auto;
margin-right: auto;
}
.service {
max-width: 1100px;
display: table;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
.virus, .screenRepair, .hardwareRepair, .WindowsReinstall, .maintenance, .SoftwareRepair, .MemoryUpgrades, .DataRecovery {
width:250px;
float:left;
margin-left: auto;
margin-right: auto;
margin-top: 0;
border:1px solid #000;
}
答案 0 :(得分:1)
您需要为类outerService指定宽度
.outerService
{
width: 70%;
margin-left: auto;
margin-right: auto;
}
此外,如果您希望outerService不指定大小,则可以使用flexbox。假设outerService的容器是正文..
body
{
display: flex;
justify-content: center;
}
.outerService
{
width: auto;
}
当前版本的所有主流浏览器都支持Flex,但如果您支持旧版本,请查看here.
答案 1 :(得分:0)
HTML中的类名使用OuterService的大写字母O
您的CSS对outerService .outerService
使用小写o尝试更改为 .OuterService { 宽度:自动; margin-left:auto; margin-right:auto; }
答案 2 :(得分:0)
对于某些div,您必须将div宽度固定为某个px。试试这个:
.outerService {
width: 850px;
margin:0 auto;
}
如果您希望div在特定屏幕尺寸下动态更改,您可以尝试使用媒体查询以百分比值创建宽度。