I am using a Popup modal component from the reactjs-popup library. 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. 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>
);
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.
Add display: flex;
to the css class of .modal > content
. Furthermore, to align the items in the center, you need to set flex-direction: column;
and align-items: center
in the same css class.
I also recommend you read up on the concept of flex alignment in this MDN article .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.