Use margin:auto
For example:
<div style=”width: 45%; display: block; margin: auto;”>
Margin:auto – will automatically center align your element:
“Auto margin is used by Apple, Google, Stripe, and other design leaders as a way to horizontally center elements. By setting auto margin to an element that has a defined width, you can horizontally center the element within the boundary of its parent.”
Quote from Webflow
The width determines what percentage of the width of the page the element takes up
Not too sure what “block” does:
“display: block
An element that has the display property set to block starts on a new line and takes up the available screen width.”
Quote from freecodecamp
I think block helps make it responsive, not sure tho!
Just for fun, here’s the code and an example for a neatly aligned text and image layout:
