产品标题对齐

Question

用PHP构建的电子商务网站。在产品列表页面中，产品和名称不直接对齐。我怎样才能解决这个问题？添加了一些脚本我希望这会有所帮助。我添加了图像高度，但图像质量不佳。

HTML：

<script>

/* -- product list images -- */
.product-image img.attachment-shop_catalog,
.product-image img.attachment-shop_single,
.product-image img.attachment-shop_thumbnail {
  display: block;
  min-width: 100%; }

.product-image {
  position: relative;
  display: block;
  overflow: hidden; }

.product-image .front-image {
  display: block;
  width: auto;
  height: auto; }

.product-image .front-image img {
  min-width: 99.9%;
  max-width: 101% !important;
  width: auto !important;
  height: auto !important;
  display: block; }

.product-image .back-image img {
  min-width: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  width: auto !important;
  height: auto !important;
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden; }

.product-image:hover .back-image img {
  opacity: 1; }

</script>

<li class="product-small  grid1 grid-normal">
							<div class="inner-wrap">
								<a href="eyewear_details.php?Id=<?php echo $Frame_id?>">
									<div class="product-image hover_fade_in_back">
										<div class="front-image">
                                            <?php if($Color1Image!="" && file_exists(FRAME_IMAGES_FRONT.$Color1Image)):?>
                                            <img width="247" height="116" alt="ete thecle-cygne" class="attachment-shop_catalog wp-post-image" src="<?php


                                            echo PHP_THUMB_PATH_FRONT.urlencode($Color1Image).IMAGE_PROPERTY5;

                                                ?>">
                                            <?php else:
                            echo '<img width="247" height="116" alt="ete thecle-cygne" class="attachment-shop_catalog wp-post-image" src="no-image-icon-11.png" style="
    height: 90px !important;"/>';
                                           
                            </div>
									</div><!-- end product-image -->
								</a> 
								<div class="info style-grid1">
									<div class="text-center">
								
									<a href="eyewear_details.php?Id=<?php echo $Frame_id?>"><p class="name"><?php echo $FrameName?></p></a>
									</div><!-- text-center -->
									<div class="clear"></div>	
								</div><!-- end info -->	
							</div> <!-- .inner-wrap -->
						</li><!-- li.product-small -->

Answer 1

您可以在css中使用css flex property或使用position:absolute; bottom:0px; width:100%; left:0px;来生成产品名称。

Answer 2

您可以使用以下方法

img {
			max-width: 100%;
		}
		.main {
			width:300px;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			flex-flow: column nowrap;
			padding: 10px;
		}

<div class="main">
		<div class="image">
			<img src="http://www.clker.com/cliparts/A/Y/O/m/o/N/placeholder-hi.png" alt="">
		</div>
		<div class="imageName">
			<a href="">Product name</a>
		</div>
	</div>
	<div class="main">
		<div class="image">
			<img src="http://vignette1.wikia.nocookie.net/prince-of-stride-alternative/images/1/14/Placeholder_person.jpg/revision/latest?cb=20160220192514" alt="">
		</div>
		<div class="imageName">
			<a href="">Product name</a>
		</div>
	</div>
	<div class="main">
		<div class="image">
			<img src="https://www.med.unc.edu/tarc/images/person%20placeholder.png" alt="">
		</div>
		<div class="imageName">
			<a href="">Product name</a>
		</div>
	</div>

Answer 3

为所有产品图像设置相同的高度。

Answer 4

您必须使用position: absolute; top: auto; left: 0; right: 0; bottom: 0;以及引导类img-thumbnail来提供响应能力。 我使用不同大小的图像与标签。 我希望这将有所帮助。 Demo Link

Answer 5

使用表格并将图像名称放在不同的行