react-images：轮播中的图像未居中答案

【问题标题】：react-images: image in carousel not centredreact-images：轮播中的图像未居中
【发布时间】：2022-03-08 00:55:46
【问题描述】：

我想将所选图像居中而不是显示在左侧。

查看行为图像：

我在 Next.js 11 和 TailwindCSS 2.2.4 中使用下面沙箱中的包： https://codesandbox.io/s/5vn3lvz2n4

依赖关系： “反应图像”：“^1.2.0-beta.7”， “反应照片库”：“^8.0.0”

我很难定位 CSS 类，但我缩小到： class="react-images__view react-images__view--isModal css-1qrom1v css-1ycyyax" 在 Safari 中使用浏览器开发工具。

以下是我的 PhotoLibrary 文件：

import React, { useState, useCallback } from "react";
import Gallery from "react-photo-gallery";
import Carousel, { Modal, ModalGateway } from "react-images";
import { photos } from "../data/photoData";

export default function PhotoLibrary() {
  const [currentImage, setCurrentImage] = useState(0);
  const [viewerIsOpen, setViewerIsOpen] = useState(false);

  const openLightbox = useCallback((event, { photo, index }) => {
    setCurrentImage(index);
    setViewerIsOpen(true);
  }, []);

  const closeLightbox = () => {
    setCurrentImage(0);
    setViewerIsOpen(false);
  };

  return (
    <div>
      <Gallery photos={photos} onClick={openLightbox} />
      <ModalGateway>
        {viewerIsOpen ? (
          <Modal onClose={closeLightbox}>
            <Carousel
              currentIndex={currentImage}
              views={photos.map((x) => ({
                ...x,
                srcset: x.srcSet,
                caption: x.title,
              }))}
            />
          </Modal>
        ) : null}
      </ModalGateway>
    </div>
  );
}

有没有人玩过 Next.js 中的轮播并能够看到我做错了什么？如果您有更好的解决方案，我也愿意。

【问题讨论】：

看来你已经修好了。在给定的沙箱上，我得到了这个输出：i.imgur.com/IbwaBuE.png——图像完全居中。
不，它在我本地的 Next.js 项目中不起作用。那是奇怪的部分，但我不知何故认为它与tailwindcss有关，但我不知道。 :-)
您检查过production 的输出吗？ next build next start 您也可以在本地设置中检查其他浏览器（Safari 除外）吗？
我使用 Safari、Google Chrome 和 Firefox 开发版在生产环境中对其进行了测试。到处都是相同的行为。 :)
与 NextJS 有同样的问题。

标签： css next.js

【解决方案1】：

将以下 CSS 添加到您的 globals.css 文件中。

.react-images__view-image--isModal {
 display: inline-block;
 left: 50%
}

【讨论】：