Recently, I started delving into React JS and Webpack but encountered a perplexing issue. My goal is simple - to center an anchor link on the screen. However, despite trying various methods like inspecting the element, removing inherited styles, setting width, margin auto, the anchor link refuses to budge. Could this be a React/Webpack mystery that eludes me?
https://i.stack.imgur.com/I8h8D.png
Here's the code for the anchor link component along with its SASS classes. (Yes, the parent container does have width: 100%)
render() {
return (
<a href={this.strava.oauth.getRequestAccessURL()}
className="connect-strava-btn">
Connect With Strava
</a>
);
}
SASS styles:
.connect-strava-btn{
width: 250px;
margin: auto;
color: black;
font-size: 11px;
padding: 20px 30px;
border: 1px solid black;
text-align: center;
text-transform: uppercase;
}
Coincidentally, changing the <a> tag to a <p> tag results in proper centering. What is it about the anchor link that React/Webpack doesn't seem to approve of? Below is my webpack.config.js file. Seeking assistance!
module.exports = {
entry: [
'./src/scripts/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [
{
exclude: /node_modules/,
loader: 'babel'
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},
{
test: /\.json$/,
loader: 'json'
}
]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};