Htmlクラスのコンテンツをdiv class = "partners"(2つの画像を含むトップdiv)の中央に配置する必要があります。下の画像からわかるように(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を中央に配置するには、その幅をある値に設定し、マージンを追加します: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プロパティに従って配置されます。
要素を中央に配置するには多くの方法があります。いくつかリストしました
.partners {
width: 80%;
margin: 0 auto;
}
.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>
あなただけが必要です
.parent-div { text-align: center }
フレックスボックスを使用してみてください。例として、次のコードは、コンテンツを中央に揃える必要があるコンテナ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;
}
問題は、.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; }
このようにします:
child{
position:absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}