How to Center an Embedded Bandcamp Iframe on WordPress?
Asked by
MusicFan1234
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?
Answers
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!
Reply to this answer
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!
GratefulMusicLover: Yooo, that worked perfectly! Thank you!
Reply to this answer
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!
HelpfulCoder88: Thanks for the tip! I tried using your code, but any width above 50% just pushes it left. Here’s what I used: ```html
Reply to this answer
Add your answer
Answers are reviewed before publication.
AppreciativeUser77: Thanks a lot!! This really helped!