[英]move image to center in popup modal
I am using a Popup modal component from the reactjs-popup library.我正在使用 reactjs-popup 库中的 Popup 模态组件。 I want to place the charts image (three charts in 1 image) at the center of the popup but properties like align-self dont seem to work for me.
我想将图表图像(一张图像中的三个图表)放在弹出窗口的中心,但像 align-self 这样的属性似乎对我不起作用。 What else can I try?
我还能尝试什么?
export default () => (
<Popup
trigger={<button className="button"> Guide </button>}
modal
nested
>
{(close: any) => (
<div className="modal">
<button className="close" onClick={close}>
×
</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>
);
This is how it looks like:这是它的样子:
css 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;
}
I also want to move the text what's overfitting
under the images in center.我还想在中心的图像下移动
what's overfitting
的文本。
Add display: flex;
添加
display: flex;
to the css class of .modal > content
.到
.modal > content
的 css class 。 Furthermore, to align the items in the center, you need to set flex-direction: column;
此外,要使项目居中对齐,您需要设置
flex-direction: column;
and align-items: center
in the same css class.并
align-items: center
在同一 css class 中居中。
I also recommend you read up on the concept of flex alignment in this MDN article .我还建议您在这篇MDN 文章中阅读 flex alignment 的概念。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.