# Markdown Visualization: changing the position of an image

**URL:** https://discuss.elastic.co/t/markdown-visualization-changing-the-position-of-an-image/233545
**Category:** Kibana
**Created:** [May 20, 2020, 1:27pm UTC](https://discuss.elastic.co/t/markdown-visualization-changing-the-position-of-an-image/233545 "2020-05-20T13:27:46Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![marrel](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@marrel](https://discuss.elastic.co/u/marrel)
#### Post date: [May 20, 2020, 1:27pm UTC](https://discuss.elastic.co/t/markdown-visualization-changing-the-position-of-an-image/233545/1 "2020-05-20T13:27:47Z")

</div>

Hello elastic community!

I am facing a problem with the markdown visualization. I have an image to display but I want to display it in the centre of the panel or on the upper right corner of the panel. Below the two screenshots.  
Is there any way? Thank you in advance!!

**Now**

 ![kibana_logo_position](https://us1.discourse-cdn.com/elastic/original/3X/9/f/9fe91ce860b4ea3bf2763abfff5d96c2e615d8e4.png)

**What I prefer**

 ![kibana_logo_position](https://us1.discourse-cdn.com/elastic/original/3X/3/9/39ac6066c1a19bd9c9941daca2b28380044ae6ac.png)

---

<div class="post-metadata">

### Author: ![marrel](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@marrel](https://discuss.elastic.co/u/marrel)
#### Post date: [May 22, 2020, 8:23am UTC](https://discuss.elastic.co/t/markdown-visualization-changing-the-position-of-an-image/233545/2 "2020-05-22T08:23:25Z")

</div>

Is there any way to do this?

---

<div class="post-metadata">

### Author: ![lukeelmers](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/lukeelmers/32/35230_2.png) [@lukeelmers](https://discuss.elastic.co/u/lukeelmers)
#### Post date: [May 25, 2020, 4:53pm UTC](https://discuss.elastic.co/t/markdown-visualization-changing-the-position-of-an-image/233545/3 "2020-05-25T16:53:09Z")

</div>

There isn't currently a way to do this with the markdown visualization itself, however, you can do it with TSVB markdown, which has the added ability to provide custom CSS.

[Here's an example from our demo environment](https://demo.elastic.co/app/kibana#/visualize/edit/55c90dc0-9287-11e8-8fa2-3d5f811fbd0f?_g=()&_a=(filters:!(),linked:!f,query:(language:kuery,query:''),uiState:(),vis:(aggs:!(),params:(axis_formatter:number,axis_position:left,axis_scale:normal,background_color:!n,bar_color_rules:!((id:c40c8e60-92a0-11e8-8753-47e77913a11a)),default_index_pattern:'filebeat-*',default_timefield:'@timestamp',drop_last_bucket:1,filter:'',id:'61ca57f0-469d-11e7-af02-69e470af7417',ignore_global_filter:1,index_pattern:kibana_sample_data_flights,interval:'1m',isModelInvalid:!f,markdown:'%23%23%20Try%20it%20on%20Elastic%20Cloud%0A%5B!!%5BCloud%20trial%5D(https:%2F%2Fs3-us-west-1.amazonaws.com%2Fdemo.elasticsearch.org%2Fdemo.elastic.co%2Bimages%2Fcloud.png)%5D(https:%2F%2Fwww.elastic.co%2Fcloud%2Felasticsearch-service%2Fsignup%3Felektra%3Dproducts-kibana-live-demo)%0A---%0A%23%20%5BFree%20Trial%5D(https:%2F%2Fwww.elastic.co%2Fcloud%2Felasticsearch-service%2Fsignup%3Felektra%3Dproducts-kibana-live-demo)%0A%0A',markdown_css:'%23markdown-61ca57f0-469d-11e7-af02-69e470af7417%20a%7Bcolor:white;target-name:new;target-new:tab%7D%23markdown-61ca57f0-469d-11e7-af02-69e470af7417%20H2%7Btext-align:center%7D%23markdown-61ca57f0-469d-11e7-af02-69e470af7417%20H1%7Btext-align:center;background-color:%231BA9F5;margin:25px;padding:10px;font-size:150%25;border-radius:5px%7D',markdown_less:'a%20%7B%20color:%20white%20;%20target-name:new;%20target-new:tab;%7D%0AH2%20%7B%20text-align:%20center;%7D%0AH1%20%7B%20text-align:%20center;%20background-color:%20%231BA9F5;%20margin:%2025px;%20padding:%2010px;%20font-size:150%25;%20%20border-radius:%205px;%7D%0A',markdown_scrollbars:1,markdown_vertical_align:top,series:!((axis_position:right,chart_type:line,color:%2368BC00,fill:0.5,formatter:number,id:'61ca57f1-469d-11e7-af02-69e470af7417',line_width:1,metrics:!((id:'61ca57f2-469d-11e7-af02-69e470af7417',type:static,value:'1')),point_size:1,seperate_axis:0,split_mode:everything,stacked:none)),show_grid:1,show_legend:1,time_field:timestamp,type:markdown),title:'Welcome%20-%20Cloud',type:metrics))) of a TSVB markdown visualization with custom CSS that centers an image as you describe.

---

<div class="post-metadata">

### Author: ![marrel](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@marrel](https://discuss.elastic.co/u/marrel)
#### Post date: [May 27, 2020, 2:43pm UTC](https://discuss.elastic.co/t/markdown-visualization-changing-the-position-of-an-image/233545/4 "2020-05-27T14:43:17Z")

</div>

Thank you very much @lukeelmers for your help! I will try it with TSVB Visualization then.

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)
#### Post date: [June 24, 2020, 2:43pm UTC](https://discuss.elastic.co/t/markdown-visualization-changing-the-position-of-an-image/233545/5 "2020-06-24T14:43:19Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.
