html - 快速搜索的中心浮动左侧

Question

我想通过几个问答将快速搜索的 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;
}

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

检查这个小提琴（必须稍微改变它，使用纯色而不是图像作为背景）。