div中的CSS中心内容

我需要将html内容集中在div class =“partners”（带有2个图像的顶部div）中。正如你可以从下面的图片看到（漂浮而不是左侧的div中心）：div中的CSS中心内容

enter image description here

这是我的html代码：

<div id="partners"> 
    <div class="wrap clearfix"> 
     <h2>Partnertnerzy serwisu:</h2> 
     <ul> 
      <li><a href="http://www.dilbert.com/"><img width="56" height="16" alt="Parnter bar wika" src="/as/partners/wika.png"></a></li>  
      <li><a href="http://www.youtube.com><img width="65" height="15" alt="Parnter bar siemens" src="/as/partners/siemens.png"></a></li>  
     </ul> 
     <a class="linkClose" href="/firmy?clbp=1">Zamknij </a> 
    </div> 
</div>

图片： enter image description here

CSS：

#partners, #top { 
    position: relative; 
    z-index: 100; 
} 
#partners { 
    margin: 12px 0 3px; 
    text-align: center; 
} 
.clearfix:after, .row:after { 
    clear: both; 
    content: "."; 
    display: block; 
    height: 0; 
    visibility: hidden; 
} 
#partners .wrap { 
    width: 655px; 
} 
.wrap { 
    margin: 0 auto; 
    position: relative; 
    width: 990px; 
} 
#partners h2 { 
    color: #A6A5A5; 
    float: left; 
    font-weight: normal; 
    margin: 2px 15px 0 0; 
} 
#partners ul { 
    float: left; 
} 
ul { 
    list-style-position: outside; 
    list-style-type: none; 
}

来源

2011-10-28 ShaneKm

请修复您的css代码格式。该代码不足以理解'＃partner'容器的位置。 - 我想说，你需要一个围绕包容器的包装，并指定以下中心：#partner_wrapper {text-align：center; } #partner {display：inline-block; }'。您可以重置子元素'#partner * {text-align：left; }' – Smamatti

要以div为中心，将其宽度设置为某个值并添加margin：auto。

#partners .wrap { 
    width: 655px; 
    margin: auto; 
}

编辑，你想中心的div内容，而不是div本身。您需要将h2,ul和li的显示属性更改为inline，并删除float: left。

#partners li, ul, h2 { 
    display: inline; 
    float: none; 
}

然后，他们会像普通的文本元素根据它们的容器，这是你想要的东西的text-align属性奠定了，并对齐。

来源

2011-10-28 07:58:17 socha23

没有工作。没有变化 – ShaneKm

我的错误，你想要中心的内容，而不是div本身。我相应地更新了我的答案。 – socha23

工作。谢谢 – ShaneKm

问题是，您为.wrap DIV分配了固定宽度。 DIV本身是居中（你可以看到，当你添加一个边框），但DIV太宽了。换句话说，内容不会填充DIV的整个宽度。

要解决此问题，您必须确保.wrap DIV只与其内容一样宽。

为了实现这一目标，你必须删除的内容元素的浮动，并设置块级别元素的display属性inline：

#partners .wrap { 
display: inline; 
} 

.wrap { margin: 0 auto; position: relative;} 

#partners h2 { 
color: #A6A5A5; 
font-weight: normal; 
margin: 2px 15px 0 0; 
display: inline; 
} 

#partners ul { 
display: inline; 
} 

#partners li {display: inline} 

ul { list-style-position: outside; list-style-type: none; }

来源

2011-10-28 08:15:45 joern

此答案包含正确说明背后的解释。更多的答案应该是这样的！如果您希望将您的html显示在Gmail这样的电子邮件客户端中，那么 – mycargus

这样做：

child{ 
    position:absolute; 
    margin: auto; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
}

来源

2016-01-24 12:01:05 user3197818

有许多方法来集中任何元素。我列出了一些

将它的宽度设置为某个值并添加边距：0 auto。

.partners { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
}

分成3个列布局

.partners { 
 
    width: 80%; 
 
    margin-left: 10%; 
 
}

使用自举布局

<div class="row"> 
 
    <div class="col-sm-4"></div> 
 
    <div class="col-sm-4">Your Content/Image here</div> 
 
</div>

来源

2016-12-13 22:50:36

尝试使用Flexbox的。例如，下面的代码显示了容器div的CSS，其内容需要居中对齐：

.absolute-center { 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -ms-flex-align: center; 
    -webkit-align-items: center; 
    -webkit-box-align: center; 

    align-items: center; 

}

来源

2017-08-29 05:52:29

将不起作用 – Blundell

div中的CSS中心内容

回答

相关问题