用于控制DIV

Question

我正在使用Avada主题设置Wordpress图片库，并且我希望能够增加图库缩略图图像的大小（例如，200％或300％）并将其垂直居中。 fusion-gallery-image div。

您可以在此图片中看到小册子缩略图的问题：

这是手册div中的融合图库图像div和相关元素。

<div class="fusion-gallery-image"><a href="http://bigidearesults.com/sandbox/wp-content/uploads/2018/03/brochure-saguaro-ranch-brochure-2.jpg" class="fusion-lightbox" data-rel="iLightbox[728c57306ad178f5910]" data-title="brochure-saguaro-ranch-brochure-2" title="brochure-saguaro-ranch-brochure-2" data-caption=""><img src="http://bigidearesults.com/sandbox/wp-content/uploads/2018/03/brochure-saguaro-ranch-brochure-2-400x201.jpg" alt="" title="brochure-saguaro-ranch-brochure-2" aria-label="brochure-saguaro-ranch-brochure-2" class="img-responsive wp-image-11546" srcset="http://bigidearesults.com/sandbox/wp-content/uploads/2018/03/brochure-saguaro-ranch-brochure-2-200x100.jpg 200w, http://bigidearesults.com/sandbox/wp-content/uploads/2018/03/brochure-saguaro-ranch-brochure-2-400x201.jpg 400w, http://bigidearesults.com/sandbox/wp-content/uploads/2018/03/brochure-saguaro-ranch-brochure-2-600x301.jpg 600w, http://bigidearesults.com/sandbox/wp-content/uploads/2018/03/brochure-saguaro-ranch-brochure-2-800x401.jpg 800w, http://bigidearesults.com/sandbox/wp-content/uploads/2018/03/brochure-saguaro-ranch-brochure-2-1200x602.jpg 1200w, http://bigidearesults.com/sandbox/wp-content/uploads/2018/03/brochure-saguaro-ranch-brochure-2.jpg 1597w" sizes="(min-width: 2200px) 100vw, (min-width: 824px) 363px, (min-width: 732px) 545px, (min-width: 640px) 732px, "></a></div>

请让我知道如何增加这些图库图像的大小，并将它们垂直居中在fusion-gallery-image div中。

感谢您的帮助。

Answer 1

理想情况下，你会有一个足够大的图像/适合div的一般大小，所以你不必乱七八糟地增加尺寸，而只是适合它。

例如，书籍图像的宽度为100％，但垂直度太短。一旦你有了使用flexbox垂直和水平居中。

.fusion-gallery-image {    
    display: flex;
    justify-content: center;
    align-items: center;
}