I would like to center these product images & descriptions in the search form. I think I've caused my issue with having left & right results as per HTML below. But I may be wrong. I just want to neaten it up a little bit. Having it to the left looks odd.
I'm kind of at the limit of my simple knowledge here. I'm sorry if this is a basic question.
HTML
<span id="inline-search-results" style="display: inline;"><div id="new-advanced-search-box">
<div >
<ul >
<li>
<a href="/product_search/?q=avensynt1152"><span >ave</span>nsynt1152</a>
</li>
<li>
<a href="/product_search/?q=avensynt1151"><span >ave</span>nsynt1151</a>
</li>
<li>
<a href="/product_search/?q=avensynt1150"><span >ave</span>nsynt1150</a>
</li>
<li>
<a href="/product_search/?q=avensynt1156"><span >ave</span>nsynt1156</a>
</li>
<li>
<a href="/product_search/?q=avensynt1145"><span >ave</span>nsynt1145</a>
</li>
<li>
<a href="/product_search/?q=avensynt1155"><span >ave</span>nsynt1155</a>
</li>
<li>
<a href="/product_search/?q=avensynt1154"><span >ave</span>nsynt1154</a>
</li>
<li>
<a href="/product_search/?q=avenue"><span >ave</span>nue</a>
</li>
<li>
<a href="/product_search/?q=avensynt1153"><span >ave</span>nsynt1153</a>
</li>
<li>
<a href="/product_search/?q=avensynt1149"><span >ave</span>nsynt1149</a>
</li>
<li>
<a href="/product_search/?q=avensynt1148"><span >ave</span>nsynt1148</a>
</li>
<li>
<a href="/product_search/?q=avensynt1157"><span >ave</span>nsynt1157</a>
</li>
</ul>
</div>
<div >
<div >
<ul>
<li >
<a title="Avenue Rayne 1150" href="/solution-dyed-nylon-carpets/avenue/avensynt1150-avenue-rayne-1150/">
<div >
<img src="https://cdn-5c84bc36-b681cbc1.mysagestore.com/d2dffd71ca1f290f12a2a3d9bf2343e7/contents/AVENSYNT1150/thumbnail/big_AVENSYNT1150.jpg" alt="Avenue Rayne 1150">
</div>
<div ><span >Ave</span>nue Rayne 1150</div>
<div ><span >AVE</span>NSYNT1150ALIAS</div>
</a>
</li>
<li >
<a title="Avenue Milton 1149" href="/solution-dyed-nylon-carpets/avenue/avensynt1149-avenue-milton-1149/">
<div >
<img src="https://cdn-5c84bc36-b681cbc1.mysagestore.com/d2dffd71ca1f290f12a2a3d9bf2343e7/contents/AVENSYNT1149/thumbnail/big_AVENSYNT1149.jpg" alt="Avenue Milton 1149">
</div>
<div ><span >Ave</span>nue Milton 1149</div>
<div ><span >AVE</span>NSYNT1149ALIAS</div>
</a>
</li>
<li >
<a title="Avenue Morland 1148" href="/solution-dyed-nylon-carpets/avenue/avensynt1148-avenue-morland-1148/">
<div >
<img src="https://cdn-5c84bc36-b681cbc1.mysagestore.com/d2dffd71ca1f290f12a2a3d9bf2343e7/contents/AVENSYNT1148/thumbnail/big_AVENSYNT1148.jpg" alt="Avenue Morland 1148">
</div>
<div ><span >Ave</span>nue Morland 1148</div>
<div ><span >AVE</span>NSYNT1148ALIAS</div>
</a>
</li>
<li >
<a title="Avenue Cudmore 1154" href="/solution-dyed-nylon-carpets/avenue/avensynt1154-avenue-cudmore-1154/">
<div >
<img src="https://cdn-5c84bc36-b681cbc1.mysagestore.com/d2dffd71ca1f290f12a2a3d9bf2343e7/contents/AVENSYNT1154/thumbnail/big_AVENSYNT1154.jpg" alt="Avenue Cudmore 1154">
</div>
<div ><span >Ave</span>nue Cudmore 1154</div>
<div ><span >AVE</span>NSYNT1154ALIAS</div>
</a>
</li>
<li >
<a title="Autumn Mist Mistflower 1157" href="/solution-dyed-nylon-carpets/avenue/avensynt1157-avenue-annesley-1157/">
<div >
<img src="https://cdn-5c84bc36-b681cbc1.mysagestore.com/d2dffd71ca1f290f12a2a3d9bf2343e7/contents/AVENSYNT1157/thumbnail/big_AVENSYNT1157.jpg" alt="Autumn Mist Mistflower 1157">
</div>
<div >Autumn Mist Mistflower 1157</div>
<div >AUTUSYNT1157ALIAS</div>
</a>
</li>
<li >
<a title="Avenue Sherwood 1151" href="/solution-dyed-nylon-carpets/avenue/avensynt1151-avenue-sherwood-1151/">
<div >
<img src="https://cdn-5c84bc36-b681cbc1.mysagestore.com/d2dffd71ca1f290f12a2a3d9bf2343e7/contents/AVENSYNT1151/thumbnail/big_AVENSYNT1151.jpg" alt="Avenue Sherwood 1151">
</div>
<div ><span >Ave</span>nue Sherwood 1151</div>
<div ><span >AVE</span>NSYNT1151ALIAS</div>
</a>
</li>
</ul>
</div>
</div>
</div>
CSS
element.style {
display: inline; }
@media only screen and (max-width: 768px)
#inline-search-results {
width: 100%; }
@media only screen and (max-width: 960px)
#inline-search-results {
width: 370px;
}
@media only screen and (max-width: 1280px)
#inline-search-results {
width: 590px;
}
#inline-search-results {
background: none repeat scroll 0 0 #fff;
border: 1px solid silver;
-webkit-border-radius: 3px;
border-radius: 3px;
box-shadow: 0 1px 5px silver;
-webkit-box-shadow: 1px 1px 5px silver;
position: absolute;
z-index: 2001;
top: 35px;
left: 0;
display: none;
}
* {
margin: 0;
padding: 0;
}
.grid-col2-main, .grid-col2-sidebar, .grid-full, .grid12-1, .grid12-10, .grid12-11, .grid12-12, .grid12-2, .grid12-3, .grid12-4, .grid12-5, .grid12-6, .grid12-7, .grid12-8, .grid12-9 {
display: inline;
float: left;
margin-left: 1%;
margin-right: 1%;
}
CodePudding user response：
Can you show us, how it's displaying ?
CodePudding user response：
**Add display flex property and align-items center**
#inline-search-results {
background: none repeat scroll 0 0 #fff;
border: 1px solid silver;
-webkit-border-radius: 3px;
border-radius: 3px;
box-shadow: 0 1px 5px silver;
-webkit-box-shadow: 1px 1px 5px silver;
position: absolute;
z-index: 2001;
top: 35px;
left: 0;
display: flex;
align-items:center;
justify-content:center
}