Is there a way to ensure that the image is perfectly centered on the page without altering the component's CSS?
You may want to showcase an image, by utilizing the following style properties:
var itemStyle = {
display: 'block',
width: this.computeWidth(),
height: '250px',
backgroundImage: 'url(' + imageLocation + ')',
backgroundPosition: 'center !important',
backgroundSize: 'cover',
boxShadow: '10px 10px 5px #888888',
borderRadius: '15px',
marginLeft: 'auto !important',
marginRight: 'auto !important'
};
This style can be applied like so:
<div style={itemStyle}>
</div>
A dynamic method this.computeWidth() is employed to resize the width of the image based on the page:
computeWidth: function() {
console.log("this.state.window.width: " + this.state.window.width);
if(this.state.window.width > 350) {
return '250px';
}
return Math.floor(0.7 * this.state.window.width).toString() + 'px';
},
An alternate method tries to dynamically compute marginLeft and marginRight:
computeMargin: function() {
if(this.state.window.width > 350) {
return 'margin-auto';
}
return Math.floor(0.15 * this.state.window.width).toString() + 'px';
},
However, despite these attempts, centering the image seems elusive.
What strategies can be implemented to guarantee the perfect alignment of the image on the page, while avoiding changes to the component's existing css settings?