Question

您好我有以下代码：的 CSS

div.ex {
  border:1px solid black;
  display:inline-block;
  height:20px;
}

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div id="wrapper">
  <div class="ex" data-bind="style: { width : mywidth() + 'px'}"></div>
</div>

<div>
  Set width: <input data-bind="value: mywidth">
  <button data-bind="click: gethtml">Log Current HTML</button>
</div>

我还尝试.center{ width: 100%; margin: 0 auto; border: 1px solid red; } .nav{ background: #606060; width: 90%; }没有<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/stylesheet.css" /> <title></title> </head> <body> <div class="center"> <div class="nav"> <p>Ahoj</p> </div> </div> </body> </html>我在这里搜索了主题，但我找不到解决方案。 .center div仍留在左侧。谢谢你的帮助。

Answer 1

将margin:0 auto提交给.nav课程，而不是.center课程。

＆＃13;

.center{
  width: 100%;   
  border: 1px solid red;
}

.nav{
  background: #606060;
  width: 90%;
  margin:0 auto;
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/stylesheet.css" />
        <title></title>
    </head>
    <body>
        <div class="center">
             <div class="nav">
                <p>Ahoj</p>
             </div>
        </div>
    </body>
</html>

＆＃13;

Answer 2

您不需要定义保证金：0 auto;当宽度为100％时。如果要将固定宽度的分割定位到父div的中心，则需要它。

＆＃13;

.center{
    width: 100%;
    border: 1px solid red;
}

.nav{
    background: #606060;
    width: 90%;
    margin: 0 auto;
}

＆＃13;

<div class="center">
     <div class="nav">
        <p>Ahoj</p>
     </div>
</div>

＆＃13;

Answer 3

将此CSS添加到.nav类

.nav {
 .
 .
 margin: 0 auto;
 text-align: center
}

Answer 4

块级元素无法居中，因为它始终适合其容器的100%宽度，因此我建议使用inline-block代替。

＆＃13;

.center{
    width: 100%;
    margin: 0 auto;
    border: 1px solid red;
    text-align:center;
}

.nav{
    background: #606060;
    width: 90%;
    display:inline-block;
}

＆＃13;

        <div class="center">
             <div class="nav">
                <p>Ahoj</p>
             </div>
        </div>

＆＃13;

Answer 5

.nav {
background: #606060;
width: 90%;
display: block;
margin: 0 auto;

}

div margin auto中的中心div不起作用

5 个答案: