<div class='noshop-products-div'><div class='noshop-products' align='center'> <!-- -------------------- NoShop Item: The Dream Giver Library / The Dream Giver -------------------- --> <div class='noshop-product '> <div class=noshop-product-imageBox width=83 style="width:83px;" > <a href="http://jesper.angelo.net/wordpress/noshop/" /><img class=noshop-product-image width=83 style="width:83px;" src="./wp-content/themes/mingle-theme/parallelus-mingle/assets/images/skins/skin-7/bw/products/dreamgiver/dreamgiver.png" /></a> </div> <div class=noshop-product-textBox> <a href="http://jesper.angelo.net/wordpress/noshop/" /><div class=noshop-product-title>The Dream Giver</div></a> <div class=noshop-product-desc> </div> <div class=noshop-product-subtable> </div> </div> </div> <!-- -------------------- NoShop Item: The Dream Giver Library / The Dream Giver DVD -------------------- --> <div class='noshop-product '> <div class=noshop-product-imageBox width=83 style="width:83px;" > <a href="http://jesper.angelo.net/wordpress/noshop/" /><img class=noshop-product-image width=83 style="width:83px;" src="./wp-content/themes/mingle-theme/parallelus-mingle/assets/images/skins/skin-7/bw/products/dreamgiver/dreamgiverdvd.png" /></a> </div> <div class=noshop-product-textBox> <a href="http://jesper.angelo.net/wordpress/noshop/" /><div class=noshop-product-title>The Dream Giver DVD</div></a> <div class=noshop-product-desc> </div> <div class=noshop-product-subtable> </div> </div> </div> <!-- -------------------- NoShop Item: The Dream Giver Library / The Dream Giver CD -------------------- --> <div class='noshop-product '> <div class=noshop-product-imageBox width=83 style="width:83px;" > <a href="http://jesper.angelo.net/wordpress/noshop/" /><img class=noshop-product-image width=83 style="width:83px;" src="./wp-content/themes/mingle-theme/parallelus-mingle/assets/images/skins/skin-7/bw/products/dreamgiver/dreamgivercd.png" /></a> </div> <div class=noshop-product-textBox> <a href="http://jesper.angelo.net/wordpress/noshop/" /><div class=noshop-product-title>The Dream Giver CD</div></a> <div class=noshop-product-desc> </div> <div class=noshop-product-subtable> </div> </div> </div> <!-- -------------------- NoShop Item: The Dream Giver Library / The Dream Giver Workbook -------------------- --> <div class='noshop-product '> <div class=noshop-product-imageBox width=83 style="width:83px;" > <a href="http://jesper.angelo.net/wordpress/noshop/" /><img class=noshop-product-image width=83 style="width:83px;" src="./wp-content/themes/mingle-theme/parallelus-mingle/assets/images/skins/skin-7/bw/products/dreamgiver/dreamgiverworkbook.png" /></a> </div> <div class=noshop-product-textBox> <a href="http://jesper.angelo.net/wordpress/noshop/" /><div class=noshop-product-title>The Dream Giver Workbook</div></a> <div class=noshop-product-desc> </div> <div class=noshop-product-subtable> </div> </div> </div> <!-- -------------------- NoShop Item: The Dream Giver Library / The Dream Giver for Teens -------------------- --> <div class='noshop-product '> <div class=noshop-product-imageBox width=83 style="width:83px;" > <a href="http://jesper.angelo.net/wordpress/noshop/" /><img class=noshop-product-image width=83 style="width:83px;" src="./wp-content/themes/mingle-theme/parallelus-mingle/assets/images/skins/skin-7/bw/products/dreamgiver/dreamgiverteens.png" /></a> </div> <div class=noshop-product-textBox> <a href="http://jesper.angelo.net/wordpress/noshop/" /><div class=noshop-product-title>The Dream Giver for Teens</div></a> <div class=noshop-product-desc> </div> <div class=noshop-product-subtable> </div> </div> </div> <!-- -------------------- NoShop Item: The Dream Giver Library / The Dream Giver for Parents -------------------- --> <div class='noshop-product last-product'> <div class=noshop-product-imageBox width=83 style="width:83px;" > <a href="http://jesper.angelo.net/wordpress/noshop/" /><img class=noshop-product-image width=83 style="width:83px;" src="./wp-content/themes/mingle-theme/parallelus-mingle/assets/images/skins/skin-7/bw/products/dreamgiver/dreamgiverparents.png" /></a> </div> <div class=noshop-product-textBox> <a href="http://jesper.angelo.net/wordpress/noshop/" /><div class=noshop-product-title>The Dream Giver for Parents</div></a> <div class=noshop-product-desc> </div> <div class=noshop-product-subtable> </div> </div> </div> </div><!--End Products DIV --> /* No Shop Categories */ .The_Dream_Giver_Library { background: #cf2426; background: -moz-linear-gradient(top,#cf2426 0%,#ac1e1f 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#cf2426),color-stop(100%,#ac1e1f)); background: -webkit-linear-gradient(top,#ac1e1f 100%); background: -o-linear-gradient(top,#ac1e1f 100%); background: -ms-linear-gradient(top,#ac1e1f 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cf2426',endColorstr='#ac1e1f',GradientType=0 ); background: linear-gradient(top,#ac1e1f 100%); } /* No Shop Products */ .noshop-category { color: #fff; width: 100%; margin: 0 auto; margin-bottom: 5px; text-align: center; padding-top: 3px; font-weight: bold; font-size: 18px; height: 30px; -webkit-Box-shadow: 1px 1px 10px 1px rgba(0,.3); -moz-Box-shadow: 1px 1px 10px 1px rgba(0,.3); Box-shadow: 1px 1px 10px 1px rgba(0,.3); border: 1px solid rgba(0,0.4); } .noshop-products-div { margin: 0 auto; text-align: center; } .noshop-products { margin: 0 auto; height: 190px; background: #fefefe; background: -moz-linear-gradient(top,#fefefe 0%,#d3d3d3 100%); background: -webkit-gradient(linear,#fefefe),#d3d3d3)); background: -webkit-linear-gradient(top,#d3d3d3 100%); background: -o-linear-gradient(top,#d3d3d3 100%); background: -ms-linear-gradient(top,#d3d3d3 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe',endColorstr='#d3d3d3',#d3d3d3 100%); -webkit-Box-shadow: 1px 1px 10px 1px rgba(0,0.4); margin-top: 10px; display:-moz-inline-stack; display:inline-block; text-align: cente; } .noshop-product { display:-moz-inline-stack; display:inline-block; width: 115px; height: 170px; margin: 10px 0px; border-right: 1px solid #939598; } .last-product { border-right: none; } .noshop-product-imageBox { margin: 0 auto; width: 83px; } .noshop-product-imageBox img { height: 115px; } .noshop-product-textBox { text-align: center; padding: 0px 15px; } .noshop-product-textBox a,.noshop-product-textBox a:visited,.noshop-product-textBox a:link { color: #000; font-size: 10px; font-weight: bold; }
解决方法
你只需要这个:
.noshop-product { vertical-align: top }
您的问题有两个原因:默认的vertical-align是基线,而另一个.noshop-products中的文本都有两行文本.