Question

我尝试在使用margin: auto; css的同时使用display: inline-block;。在我输入inline-block代码之前，它运行良好，div使用margin auto进行居中。但现在它不再起作用了。

我希望Divs徽标和contact_info为内联，div .inner为中心。

.inner {
  width: 80%;
  display: inline-block;
  margin: auto;
  padding-top: 40px;
  padding-bottom: 40px;
}

.logo {
  float: left;
}

.contact_info {
  float: right;
}

HTML CODE

    <div class="inner"> <!-- Top header -->
    <div class="logo">
    Logga här
    </div>

    <div class="contact_info">

        <h4> Vikbo Bil & Motor AB </h4>
        <p> Ekkällavägen 6 </p>
        <p> 610 24 Vikbolandet </p>
        <p> 0125 500 71 </p>

    </div>
    </div>

Answer 1

从.inner类中删除内联块。

display: inline-block;

使元素很好......内联。意味着它只占用宽度的空间，并允许其他内联元素占用页面中的剩余空间（如果它们可以适应）。

你想要的是创建.inner div一个块元素，即使在div为它自己的宽度占用空间之后可能有额外的空间，也不会让任何其他元素占用那个空间。意思是，它将是该行中唯一的元素。

因此您可以使用margin: auto使其居中。

我发现您在徽标和float上使用contact_info展示位置意味着它们不适合div.inner。你应该在这些div上使用display: inline-block，因此它们内联在div.inner内。

看看这个fiddle是否满足您的所有需求？

Answer 2

只需移除＆＃34;内部＆＃34;上的内联块属性即可。 div：

＆＃13;

.inner {
width: 80%;
margin: auto;
padding-top: 0;
padding-bottom: 40px;
background: blue;
}

.logo {
float: left;
  background: red;
}

.contact_info {
float: right;
  background: green;
}

＆＃13;

<div class="container">
  <div class="logo">logo</div>
  <div class="contact_info">contact_info</div>
  <div class="inner">inner</div>
</div>

＆＃13;

Answer 3

您可以使用此代码解决问题

.inner{
width:100%
margin:0 auto;
display: block;
height: 100px;
}

.logo{
display:inline-block;
width:auto;
}

.contact_info{
display:inline-block;
width:auto;
}

内联块与边距：0自动

3 个答案: