0

いくつかの Q & A で QuickSearch の div を中央に配置したいのですが、うまくいきません。div は、背景画像を左にフロートします。

HTML

<div class="l-row">
  <div class="QuickSearch">
    <div class="loop"></div>
    <form action=><div class="quickSearchInputName">xxx</div></form> 
  </div>
</div>

CSS

.QuickSearch {
  background: url(/templates/_system/main/images/job-search-bg.jpg) no-repeat top left;
  float:left;
  width:900px;
  height:170px;
  display:block;
  text-align:center;
  margin: 0px auto 0px auto;
}

.loop {
  /* background: url(quickSearch.png) no-repeat;*/
  width: 10px; height: 135px;
  display: block;
  float: left;
  margin: 0 0 0 2px;    
}

l-row {
  max-width:942px;
  width:100%;
  min-width:942px;
  text-align:center;
}
4

1 に答える 1

1

さて、ここに固定サイズの要素があるので、古典に従うべきだと思います：

.loop {
  width: 10px; height: 135px;
  ...
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -67px;
  /* taking into account that margin-right: 2px in the original ruleset */
  margin-left: -3px; 
}

このフィドルを確認してください（背景に画像の代わりに無地の色を使用して、多少変更する必要がありました）。

于 2012-09-09T14:30:55.130 に答える