Javascript 为什么赢了'；是否验证资源中心使用display:flex的React组件？

您好，我在一个React项目中工作，并在NPM上找到了一个滑动窗格库，我正在自定义该库以供使用。我想将窗格水平居中，因此我尝试将“调整内容：居中”添加到flexbox，但我的组件仍然不会居中。我还尝试了“对齐项目：中心”，但这只会将面板内的所有内容移动到中心，而不是面板本身。我尝试了“边距：0自动”，但也不起作用，但“左边距：50px”会移动它。有人知道是什么阻止它居中吗？以下是CSS和.js代码：

---

如果我从您的图片和描述中理解正确，听起来您想要的是一个行格式的flex box和

justify content:center

，位于

.slide pane

的父容器上

为元素指定一个

display:flex

属性不允许您定位该元素，只允许它的子元素，您似乎已经理解了：

我还尝试了“对齐项目：中心”，但这只会将面板内的所有内容移动到中心

---

是否尝试对齐项目：居中；文本对齐：居中？是的，这只会使文本在面板内居中，而不是相对于页面本身的面板。谢谢您的回复。我尝试将面板组件包装在一个带有样式显示的div中：flex；弯曲方向：行；证明内容：中心；但这改变了一切。这就是你的意思吗？应该可以了-你做了父级

宽度：100%

？只是增加了宽度：100%，但还是没有。但是，这个div中的所有其他内容都居中，只是因为某些原因而不是面板…我不熟悉react-modal或用于构造渲染的

createElement

方法，但是我注意到，

.slide-pane\u overlay

有

位置：fixed

，它将始终相对于视口锚定该元素-也许您想要

位置：absolute

？否则，我只能建议您使用浏览器开发工具来检查：1）父项为页面宽度的100%，2）幻灯片窗格div不是100%。

/*custom version of css file found in the react-sliding-pane library*/

.slide-pane {
  display: flex;
  flex-direction: column;
  justify-content: center; /*Why wont this work?!?!*/
  background: #fff;
  opacity: 0.8;
  width: 100%;
  max-width: 1200px;
  height: 100%;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.5s ease;
  will-change: transform;
}
.slide-pane:focus {
  outline-style: none;
}
.slide-pane_from_right {
  margin-left: auto;
  transform: translateX(100%);
}
.slide-pane_from_right.ReactModal__Content--after-open {
  transform: translateX(0%);
}
.slide-pane_from_right.ReactModal__Content--before-close {
  transform: translateX(100%);
}
.slide-pane_from_left {
  margin-right: auto;
  transform: translateX(-100%);
}
.slide-pane_from_left.ReactModal__Content--after-open {
  transform: translateX(0%);
}
.slide-pane_from_left.ReactModal__Content--before-close {
  transform: translateX(-100%);
}
.slide-pane_from_bottom {
  /* height: 90vh; */
  /* margin-top: 10vh; */
  transform: translateY(100%);
}
.slide-pane_from_bottom.ReactModal__Content--after-open {
  transform: translateY(0%);
}
.slide-pane_from_bottom.ReactModal__Content--before-close {
  transform: translateY(100%);
}
.slide-pane__overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(0, 0, 0, 0);
}
.slide-pane__overlay.ReactModal__Overlay--after-open {
  background-color: rgba(0, 0, 0, 0.5);
  transition: background-color 0.5s;
}
.slide-pane__overlay.ReactModal__Overlay--before-close {
  background-color: rgba(0, 0, 0, 0);
}
.slide-pane__header {
  display: flex;
  flex: 0 0 64px;
  align-items: center;
  background: #ebebeb;
  height: 64px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.slide-pane__title-wrapper {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-left: 32px;
  min-width: 0;
}
.slide-pane .slide-pane__title {
  font-size: 18px;
  font-weight: normal;
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: 0;
}
.slide-pane__close {
  margin-left: 24px;
  padding: 16px;
  opacity: 0.7;
  cursor: pointer;
}
.slide-pane__close svg {
  width: 12px;
  padding: 0;
}
.slide-pane__content {
  position: relative;
  overflow-y: auto;
  padding: 24px 32px;
  flex: 1 1 auto;
}
.slide-pane__subtitle {
  font-size: 16px;
  margin-top: 2px;
}

// Custom version of https://www.npmjs.com/package/react-sliding-pane

import React from "react";
import PropTypes from "prop-types";
import Modal from "react-modal";

var CLOSE_TIMEOUT = 500;
function ReactSlidingPane(_ref) {
  var isOpen = _ref.isOpen,
    title = _ref.title,
    subtitle = _ref.subtitle,
    onRequestClose = _ref.onRequestClose,
    onAfterOpen = _ref.onAfterOpen,
    children = _ref.children,
    className = _ref.className,
    overlayClassName = _ref.overlayClassName,
    // closeIcon = _ref.closeIcon,
    _ref$from = _ref.from,
    from = _ref$from === void 0 ? "right" : _ref$from,
    height = _ref.height,
    // marginTop = _ref.marginTop,
    shouldCloseOnEsc = _ref.shouldCloseOnEsc;
  var directionClass = "slide-pane_from_".concat(from);
  return /*#__PURE__*/ React.createElement(
    Modal,
    {
      ariaHideApp: false,
      className: "slide-pane "
        .concat(directionClass, " ")
        .concat(className || ""),
      style: {
        content: {
          height: height || "auto",
          position: "absolute",
          bottom: "0px",
        },
      },
      overlayClassName: "slide-pane__overlay ".concat(overlayClassName || ""),
      closeTimeoutMS: CLOSE_TIMEOUT,
      isOpen: isOpen,
      shouldCloseOnEsc: shouldCloseOnEsc,
      onAfterOpen: onAfterOpen,
      onRequestClose: onRequestClose,
      contentLabel: 'Modal "'.concat(title || "", '"'),
    },
    /*#__PURE__*/ React.createElement(
      "div",
      {
        className: "slide-pane__header",
      },
      // /*#__PURE__*/ React.createElement(
      //   "div",
      //   {
      //     className: "slide-pane__close",
      //     onClick: onRequestClose,
      //   },
      //   closeIcon || /*#__PURE__*/ React.createElement(IconClose, null)
      // ),
      /*#__PURE__*/ React.createElement(
        "div",
        {
          className: "slide-pane__title-wrapper",
        },
        /*#__PURE__*/ React.createElement(
          "h2",
          {
            className: "slide-pane__title",
          },
          title
        ),
        /*#__PURE__*/ React.createElement(
          "div",
          {
            className: "slide-pane__subtitle",
          },
          subtitle
        )
      )
    ),
    /*#__PURE__*/ React.createElement(
      "div",
      {
        className: "slide-pane__content",
      },
      children
    )
  );
}
ReactSlidingPane.propTypes = {
  isOpen: PropTypes.bool.isRequired,
  title: PropTypes.any,
  subtitle: PropTypes.any,
  onRequestClose: PropTypes.func,
  onAfterOpen: PropTypes.func,
  children: PropTypes.any.isRequired,
  className: PropTypes.string,
  overlayClassName: PropTypes.string,
  from: PropTypes.oneOf(["left", "right", "bottom"]),
  width: PropTypes.string,
  // closeIcon: PropTypes.any,
  shouldCloseOnEsc: PropTypes.bool,
};

// function IconClose() {
//   return /*#__PURE__*/ React.createElement(
//     "svg",
//     {
//       xmlns: "http://www.w3.org/2000/svg",
//       viewBox: "0 0 13 22",
//     },
//     /*#__PURE__*/ React.createElement("path", {
//       fill: "currentColor",
//       fillRule: "evenodd",
//       d:
//         "M4 11l8 8c.6.5.6 1.5 0 2-.5.6-1.5.6-2 0l-9-9c-.6-.5-.6-1.5 0-2l9-9c.5-.6 1.5-.6 2 0 .6.5.6 1.5 0 2l-8 8z",
//     })
//   );
// }

export default ReactSlidingPane;