Question

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 320px;
    padding: 15px;
    border: 5px solid gray;
    margin:0 auto;
}
</style>
</head>
<body>
<table border="5" bordercolor="Grey" bgcolor="grey">
   <tr><td><div><font size="20"><font face="Helvetica"color="white"><center><b>£799<b><center></div></td></tr>

</table> 
</body>
</html>

我似乎无法将边界居中。我尝试过使用 margin：0 auto;以及“ margin-left：auto; ”和“ margin-right：auto; ”当我将代码粘贴到我的网站上时，它显示的方式不同。我希望在799英镑左右的拉链旁边有一个更大的盒子，颜色为灰色。

希望得到一些帮助并解释为什么会发生这种情况。

感谢。

http://i.stack.imgur.com/E34sc.png

http://i.stack.imgur.com/TIMC3.png

Answer 1

试试这个JSFiddle：

<style>
    div {
        width: 320px;
        padding: 15px;
        border: 5px solid gray;
        margin:0 auto;
        font-size:20px;
        font-face:"Helvetica";
        color: #fff;
        font-weight:bold;
        text-align: center;
    }
</style>
<body>
    <table border="5" bordercolor="Grey" bgcolor="grey">
        <tr>
            <td>
                <div>£799</div>
            </td>
        </tr>
    </table>
</body>

Answer 2

我不确定你之后会做什么 - 但是这样可行（稍微整理一下html / css）。假设你有其他可能不需要相同样式的div，我留下了一些内联的css。

＆＃13;

div {
  width: 320px;
  padding: 15px;
  border: 5px solid gray;
  margin: 0 auto;
  text-align: center
}

＆＃13;

<table border="5" bordercolor="Grey" bgcolor="grey">
  <tr>
    <td>
      <div style="font-size:20px; font-family:Helvetica; color:white"><b>£799</b>
      </div>
    </td>
  </tr>

</table>

＆＃13;

Answer 3

试试这个：

<!DOCTYPE html>
<html>
  <head>
    <style>
      body{   
           margin:0 auto;}

      .centeredDiv {
           width: 100%;
           margin:0 auto;
           background-color:gray;
           text-align: center;
           line-height:100px;
           height:100px;
           font-size:300%;
           color:white;
           font-family:"Helvetica";
           font-weight: bold;}
    </style>
  </head>
  <body>
      <div class="centeredDiv">£799</div>
  </body>
</html>

Answer 4

你可以这样试试......

<div class="container">
   Now It's OK !
</div>


body{
    background:#626262;
}
.container{
    text-align:center;
    display:table;
    background:#7E7E7E;
    width:320px;
    margin:0 auto;
    font-size:30px;
    color:#FFF;
    box-shadow:0 0px 5px #333; 
    min-height:300px /* optional*/
}

查看jsfiddle

上的实时演示

HTML中心问题

4 个答案: