web-dev-qa-db-ja.com

div内のCSSセンターコンテンツ

Htmlクラスのコンテンツをdiv class = "partners"（2つの画像を含むトップdiv）の中央に配置する必要があります。下の画像からわかるように（divの中央ではなく左に浮かんでいます）：

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;
}
htmlcsscss3css-float
48
ShaneKm

Divを中央に配置するには、その幅をある値に設定し、マージンを追加します：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プロパティに従って配置されます。

67
socha23

要素を中央に配置するには多くの方法があります。いくつかリストしました

  1. 幅をある値に設定し、マージンを追加します：0 auto。
.partners {
    width: 80%;
    margin: 0 auto;
}
  1. 3列レイアウトに分割
.partners {
    width: 80%;
    margin-left: 10%;
}
  1. bootstrapレイアウトを使用
<div class="row">
    <div class="col-sm-4"></div>
    <div class="col-sm-4">Your Content / Image here</div>
</div>
13
Gnanasekar S

あなただけが必要です

.parent-div { text-align: center }
7
Dan Alboteanu

フレックスボックスを使用してみてください。例として、次のコードは、コンテンツを中央に揃える必要があるコンテナ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;

}
3
Mahendra Liya

問題は、.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; }
3
joern

このようにします：

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