1. ホーム
  2. html

[解決済み] CSS で div 内のコンテンツを中央に配置

2022-03-08 16:24:23

質問

div class="partners" (2つの画像を含むトップdiv)内のhtmlコンテンツを中央に配置する必要があります。下の画像からわかるように(divの中央ではなく、左に浮いてしまいます)。

これは私の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>

画像

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;
}

解決方法は?

divを中央寄せにするには、widthに何らかの値を設定し、margin: autoを追加します。

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

EDIT、あなたはdivそのものではなく、divの内容を中央に配置したいのです。のdisplayプロパティを変更する必要があります。 h2 , ulli から inline を削除し float: left .

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

すると、これらは通常のテキスト要素のようにレイアウトされ、コンテナのtext-alignプロパティに従って整列されます(これは、あなたが望むことです)。