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中心內容

回答

相關問題