javascript - 在React中父项中居中问题

我在React的另一个div中对齐两个组件时遇到麻烦。我为父div（snippetButtonHolder）使用相对定位，为其子项（snippet和button）使用绝对定位。我希望代码片段位于父对象的中央，而按钮则位于代码片段的右下方，但是由于某些原因，当我使用这些属性时，它们相对于整个页面而不是相对于父div定位。有人对我应该做些什么有所建议吗？

const styles = {
    module: {
        marginTop: '30px',
        padding: '20px',
    },
    snippet: {
        backgroundColor: '#f2f2f2',
        border: 'solid 1px #ccc',
        borderRadius: '4px',
        margin: '0 auto',
        padding: '10px',
        width: '100%',
        position: 'absolute',
        left: '50%',
    },
    snippetButtonHolder: {
        width: '95%',
        position: 'relative',
    },
    button: {
        float: 'right',
        marginTop: '5px',
        position: 'absolute',
        left: '94%',

    },
};

export default class CodeSnippet extends Component {
    constructor(props) {
        super(props);
    }


    render() {
        return (
            <div style={styles.module}>
                <div style={styles.snippetButtonHolder}>
                    <div style={styles.snippet}>
                        <div
                            {'text will go here'}
                        </div>
                        {this.state.showButton ?
                            <button
                                style={styles.button}>
                                Press me
                            </button>
                        : null}
                    </div>
                </div>
            </div>
        );
    }
}

最佳答案

试试看：

const styles = {
    module: {
        marginTop: '30px',
        padding: '20px',
    },
    snippet: {
        backgroundColor: '#f2f2f2',
        border: 'solid 1px #ccc',
        borderRadius: '4px',
        display: 'inline-block',
        overflow: 'hidden',
        padding: '10px',
    },
    snippetButtonHolder: {
        textAlign: 'center',
        width: '95%',
    },
    button: {
        float: 'right',
        marginTop: '5px',
    },
};

关于javascript - 在React中父项中居中问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38259213/