What is the code for centering an uploaded image?

サポート
1

I would like to center the image at the top of the topic starter which doubles as my blog for people to comment on. Or better yet, make the photo expand to the width of the box. What would be the code for that? Thanks. :slight_smile:

4

You can align an image with HTML:

<div align="center">
  <img src='//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/3/5/35b818325e1ea3cd9ef837696e6fe889447d8d5f.jpg'>
</div>

That looks like this:

5

Would it make sense to have uploaded images centered by default in Discourse? Posts look nicer this way, and probably lazy users would prefer this setting but we are… just lazy to add the HTML manually.

Users with other needs could still add the HTML.

6

I prefer images not being centered by default, they should adjust the way the reader prefers to read text (left to right, or vice versa). But that’s really always a personal flavor.

Markdown itself doesn’t have such capabilities, you’ll always need to use HTML for such things. Similar thing for showing a fixed scaled image size.

It might be a nice addition to add alignment icons into the editor, similar to what Wordpress allows, and just do the HTML magic there.

7

If the images are not wide enough they will stack horizontally like so:

horizontal images
horizontal images1192×970 274 KB

If you’re fine with losing this, then you can automatically center all images in posts using CSS.

.lightbox-wrapper {
    display: block;
    text-align: center;
}

p>img:not(.emoji){
    display: block;
    margin: 0 auto; 
}

The results would look like this:

centered images
centered images911×1516 298 KB

9

I am definitely using that. Thanks III !

10

As discussed here:

The code needs to be modified to exclude emojis.
I edited the code in the previous post to reflect that change.

The rest of the post still applies.

11

It’s now a wiki, feel free to update it.

12

I have an image I uploaded to the site that I’d like to reuse and center but it’s not working for me.

This works:
![File name|200x158](upload://kInviqVDIfMgOjsYe2SyADc5znk.png)

How would I center this image using the syntax shared above?

Thanks!

13

If you’re willing to use the BBCode plugin (and understand its risks & benefits), it allows for anyone to center images using only the editor.

14

bbcode プラグインは不要で、HTML を使うだけで大丈夫です。

<div align="center">

![Nacho-0|562x499,25%](upload://l0D8BmOF2L3fHHsyw18JmTEnGEm.png)
</div>

:warning: HTML と Markdown を混在させる場合、空行が必要である点にご注意ください。空行がないと、画像ではなく中央揃えのテキストになってしまいます。

15

なぜこれが私の環境で機能しないのでしょうか。HTML を記述するためのエディタの「コード」ボタンはどこにありますか？

ありがとうございます。

16

キーボードのキーを使って入力します。「コード」ボタンはありません。

17

はい、試しましたが、動きません。もう一度試してみます。
ありがとうございます。

18

「動作しない」とおっしゃる場合、具体的にどのような結果が表示されていますか？画像の代わりに中央揃えのテキストが表示されている可能性はありませんか？

もしそうであれば、上記の例のように空白行を含めるようにしてください。その点について補足説明を追加しています。

19

:folded_hands: これをありがとうございます！正しいコードは分かっていたのですが、正しい結果が得られませんでした。@jomaxro さんへのリマインダーとご説明に感謝します！