Sorry for the late reply! I've been off the internet for a bit there. After taking a look, it's definitely due to DW stripping a lot of code that you can use in entries but not in comments. I believe they did this to prevent spam (and I think there were already a lot of CSS html limitations in comments even before that). I think in this case it's the "align" and "margin" elements. But disclaimer, I also never really tried to code for comments, so there may be a better solution that I do not know about.
In the meantime, although it still won't look exactly the same, there is a quick fix to at least make everything, including the userpics, centered even if they'll still be above the box instead of on top. Just a slight modification using "center" tags instead of relying on the other stuff. So taking your code for one character as example:
And then if you didn't want the space at the top, you just have to bring the first "span" tag up so it's not on a new line. Code would look like this:
Again it's not a full fix, but it at least makes it nicer looking with things centered.
no subject
In the meantime, although it still won't look exactly the same, there is a quick fix to at least make everything, including the userpics, centered even if they'll still be above the box instead of on top. Just a slight modification using "center" tags instead of relying on the other stuff. So taking your code for one character as example:
And then if you didn't want the space at the top, you just have to bring the first "span" tag up so it's not on a new line. Code would look like this:
Again it's not a full fix, but it at least makes it nicer looking with things centered.
I hope that works for you!