在彈出模式中將圖像移動到中心

Question

我正在使用 reactjs-popup 庫中的 Popup 模態組件。 我想將圖表圖像（一張圖像中的三個圖表）放在彈出窗口的中心，但像 align-self 這樣的屬性似乎對我不起作用。 我還能嘗試什么？

export default () => (
  <Popup
    trigger={<button className="button"> Guide </button>}
    modal
    nested
  >
    {(close: any) => (
      <div className="modal">
        <button className="close" onClick={close}>
          &times;
        </button>
        <div className="header"> Guide </div>
        <div className="content">
          {' '}
          {/* <img src={chart} alt="charts" className="charts"/> */}
          <img src={img} alt="charts" className="charts" />
          What is overfitting?
          <br />
          What is underfitting?
          This example demonstrates the problems of underfitting and overfitting and how we can use linear regression with polynomial features to approximate nonlinear functions.
        </div>
        <div className="actions">
        </div>
      </div>
    )}
  </Popup>
);

這是它的樣子：

css

.modal {
    font-size: 12px;
    border-color: black;
    border-style: solid;
  }
  .modal > .content {
    width: 100%;
    padding: 10px 5px;
    background-color: white;
  }
  .modal > .actions {
    width: 100%;
    padding: 10px 5px;
    margin: auto;
    text-align: center;
    background-color: white;
  }
  .charts {
    align-self: center;
  }

我還想在中心的圖像下移動what's overfitting的文本。

Answer 1

添加display: flex; 到.modal > content的 css class 。 此外，要使項目居中對齊，您需要設置flex-direction: column; 並align-items: center在同一 css class 中居中。

我還建議您在這篇MDN 文章中閱讀 flex alignment 的概念。