I'm trying to center an embedded Bandcamp song on my WordPress.org site using the custom HTML block. The default iframe provided by Bandcamp doesn't center itself properly. I tried wrapping it in a div with `text-align: center`, but it only centers if I set the width to 50%, which looks good on desktop but doesn't work well on mobile devices. I'm looking for a better solution to make this iframe centered and responsive. Any suggestions?
3 Answers
You should know that `text-align: center` only applies to text and not block elements like iframes. Instead, try this CSS on your div:
```css
margin-left: auto;
margin-right: auto;
width: 80%;
```
This should help center it better!
You're right, `text-align: center` won't work for iframes. Try wrapping it in a div with flexbox:
```html
```
This will center it nicely and keep it looking good on screens of all sizes!
Yooo, that worked perfectly! Thank you!
The problem is that `text-align: center` doesn’t affect block-level elements like iframes. You can try wrapping it like this:
```html
```
This approach should let it stay centered and respond well to different screen sizes!
Thanks a lot!! This really helped!
Thanks for the tip! I tried using your code, but any width above 50% just pushes it left. Here’s what I used:
```html
```