Question

经过几次尝试更改代码以使图像上的文本做出反应后，我不知道。我尝试在Google的网站上进行引用，但仍然没有任何改变。我真正想要的是文字与图像居中。任何使它起作用的想法都会受到赞赏。

import React, { Component } from 'react';
import { Row, Col } from 'react-bootstrap';
import Picture1 from '../Assets/Picture1.png';
import Picture2 from '../Assets/Picture2.png';

const h3Style = {
    fontFamily: 'Montserrat',
    fontSize: '20px',
    textAlign: 'center'
}

const pStyle = {
    fontFamily: 'Montserrat',
    fontSize: '17px',
    textAlign: 'center',
}

const image = {
    width: '500px',
    marginTop: '30px',
    position: 'relative'
}

const divStyle = {
    marginLeft: '50px',
    marginRight: '50px'
}

export default class Row2 extends Component {
    render() {
        return(
            <Row className='show-grid text-center' style={{ marginLeft: '10px', marginRight: '10px' }}>
                <Col className="image-wrapper">
                    <img src={ Picture1 } alt='' style={ image }/>
                    <div style={ divStyle }>
                        <h3 style={ h3Style }>Are you new patient?</h3>
                        <p style={ pStyle }>Get the best possible support during and after pregnancy by registering with your local health authority</p>
                    </div>
                </Col>
                <Col className="image-wrapper">
                    <img src={ Picture2 } alt='' style={ image }/>
                    <div style={ divStyle }>
                        <h3 style={ h3Style }>Pregnancy's tracker</h3>
                        <p style={ pStyle }>Your baby’s changing day by day, and your body is keeping pace. Find out what’s going on and why, inside and out, with this week-by-week pregnancy calendar guide.</p>
                    </div>
                </Col>
        </Row>
        )
    }
};

Answer 1

尝试这种样式

.image-wrapper{
      vertical-align: top;
display: inline-block;
text-align: center;
width: 120px;

 }
 .divstyle {

   display: block;

}

如何在React JS中在图像上添加文本

1 个答案: