Saya telah melihat sintaks penurunan harga yang digunakan di GitHub untuk sementara waktu, tetapi kecuali mengubah ukuran gambar hingga halaman readme.md, saya tidak tahu bagaimana cara memusatkan gambar di dalamnya.

Apa itu mungkin? Jika ya, bagaimana?

Saya telah melihat sintaks markdown yang digunakan di github [...], saya tidak tahu cara memusatkan gambar

TL; DR

Tidak, Anda tidak bisa hanya mengandalkan sintaks Markdown. Penurunan harga tidak peduli dengan penentuan posisi.

Catatan: Beberapa prosesor penurunan harga mendukung penyertaan HTML (sebagaimana ditunjukkan oleh @ waldyr.ar), dan dalam kasus GitHub Anda dapat mundur ke sesuatu seperti <div style="text-align:center"><img src="..." /></div>. Berhati-hatilah karena tidak ada jaminan gambar akan terpusat jika repositori Anda bercabang dalam lingkungan hosting yang berbeda (Codeplex, BitBucket, ...) atau jika dokumen tidak dibaca melalui browser (Pratinjau Sublime Text Markdown, MarkdownPad, VisualStudio Web Essentials Markdown preview, ...).

Catatan 2: Ingatlah bahwa bahkan di dalam situs web GitHub, cara penurunan harga dilakukan tidak seragam. Wiki, misalnya, tidak akan mengizinkan tipuan posisi css tersebut.

Versi yang belum direvisi

The sintaks penurunan harga tidak menyediakan satu dengan kemampuan untuk mengontrol posisi gambar.

Bahkan, itu akan menjadi batas terhadap filsafat penurunan harga untuk memungkinkan format seperti, seperti yang dinyatakan dalam "Philosophy" bagian

"Dokumen yang diformat dengan penurunan harga seharusnya dapat diterbitkan sebagaimana adanya, sebagai teks biasa, tanpa terlihat seperti telah ditandai dengan tag atau instruksi pemformatan."

File penurunan harga dibuat oleh situs web github.com melalui penggunaan pustaka Ruby Redcarpet .

Redcarpet memaparkan beberapa ekstensi (seperti dicoret, misalnya) yang bukan bagian dari sintaks Markdown standar dan menyediakan "fitur" tambahan. Namun, tidak ada ekstensi yang didukung memungkinkan Anda untuk memusatkan gambar.

Ini dari dukungan Github:

Hai Waldyr,

Penurunan harga tidak memungkinkan Anda untuk mengatur perataan secara langsung (lihat dokumen di sini: http://daringfireball.net/projects/markdown/syntax#img ), tetapi Anda bisa menggunakan tag 'img' mentah HTML dan lakukan perataan dengan inline css.

Bersulang,

Jadi dimungkinkan untuk menyelaraskan gambar! Anda hanya perlu menggunakan inline css untuk menyelesaikan masalah. Anda dapat mengambil contoh dari repo github saya . Di bagian bawah README.md ada gambar sejajar terpusat. Untuk kesederhanaan, Anda dapat melakukannya sebagai berikut:

<p align="center">
  <img src="http://some_place.com/image.png" />
</p>

Meskipun, seperti yang dikatakan nulltoken, itu akan menjadi batas terhadap filosofi Markdown!

Kode ini dari readme saya :

<p align="center">
  <img src="https://github.com/waldyr/Sublime-Installer/blob/master/sublime_text.png?raw=true" alt="Sublime's custom image"/>
</p>

Menghasilkan output gambar ini, kecuali di tengah ketika dilihat di GitHub:

Atau, jika Anda memiliki kendali atas css, Anda bisa menjadi pandai dengan parameter url dan css .

Penurunan harga:

![A cute kitten](http://placekitten.com/200/300?style=centerme)

Dan CSS:

img[src$="centerme"] {
  display:block;
  margin: 0 auto;
}

Anda dapat membuat berbagai opsi gaya dengan cara ini dan tetap menjaga penurunan harga dari kode tambahan. Tentu saja Anda tidak memiliki kendali atas apa yang terjadi jika orang lain menggunakan penurunan harga di tempat lain, tetapi itu masalah styling umum dengan semua dokumen penurunan harga yang dibagikan.

Untuk perataan kiri

 <img align="left" width="600" height="200" src="https://www.python.org/python-.png">

Untuk pelurusan kanan

<img align="right" width="600" height="200" src="https://www.python.org/python-.png">

Dan untuk perataan tengah

<p align="center">
  <img width="600" height="200" src="https://www.python.org/python-.png">
</p>

Garpu di sini untuk referensi di masa mendatang, jika Anda menemukan ini berguna.

Ini bekerja untuk saya di github

<p align="center"> 
<img src="...">
</p>

Anda juga dapat mengubah ukuran gambar dengan lebar dan tinggi yang diinginkan . Sebagai contoh:

<p align="center">
  <img src="https://anyserver.com/image.png" width="750px" height="300px"/></p>

Untuk menambahkan teks di tengah ke gambar, cukup satu baris lagi:

<p align="center">This is a centered caption for the image<p align="center">

Untungnya, ini berfungsi baik untuk README.md dan halaman Wiki GitHub.

Kita bisa menggunakan ini. Ubah lokasi src ur img Anda dari folder git dan tambahkan teks alternatif jika img tidak dimuat

 <p align="center"> 
    <img src="ur img url here" alt="alternate text">
 </p>

Cukup buka Readme.mdfile dan gunakan kode ini.

<div align="center">
<img src=https://newfastuff.com/wp-content/uploads/2019/05/bW7QXVB.png" >
<p>Perfectly balanced</p>
</div>

<div align=”center”> [ Your content here ]</div> cocok dengan semua yang ada di halaman dan tengah meluruskannya sesuai dengan dimensi halaman.

Untuk sedikit memperluas jawaban untuk mendukung gambar lokal, cukup ganti FILE_PATH_PLACEHOLDER ke jalur gambar Anda dan periksa.

<p align="center">
  <img src="FILE_PATH_PLACEHOLDER">
</p>

Cara saya untuk menyelesaikan masalah dengan pemosisian gambar adalah dengan menggunakan atribut HTML:

![Image](Image.svg){ width="800" height="600" style="display: block; margin: 0 auto" }

Gambar diubah ukurannya dan dipusatkan dengan benar, setidaknya di renderer VS markdown lokal saya.

Kemudian, saya telah mendorong perubahan ke repo dan sayangnya menyadari bahwa itu tidak berfungsi untuk file GitHub README.md . Namun demikian saya akan meninggalkan jawaban ini karena dapat membantu orang lain.

Jadi akhirnya, saya akhirnya menggunakan tag HTML lama yang baik sebagai gantinya:

<img src="Image.svg" alt="Image" width="800" height="600" style="display: block; margin: 0 auto" />

Tapi coba tebak? Beberapa metode JS menggantikan styleatribut saya ! Saya bahkan sudah mencoba classatribut dan dengan hasil yang sama!

Kemudian saya telah menemukan halaman inti berikut di mana HTML yang lebih lama digunakan:

<p align="center">
    <img src="Image.svg" alt="Image" width="800" height="600" />
</p>

Namun yang ini berfungsi dengan baik, saya ingin meninggalkannya tanpa komentar lebih lanjut ...

TLDR;

Gunakan HTML / CSS ini untuk menambah dan memusatkan gambar dan mengatur ukurannya menjadi 60% dari lebar ruang layar di dalam file penurunan harga Anda, yang biasanya merupakan nilai awal yang baik:

<img src="https://i.stack.imgur.com/RJj4x.png" 
     style="display:block;float:none;margin-left:auto;margin-right:auto;width:60%"> 

Ubah nilai widthCSS ke persentase apa pun yang Anda inginkan, atau hapus semuanya untuk menggunakan ukuran standar penurunan harga, yang menurut saya adalah 100% dari lebar layar jika gambar lebih besar dari layar, atau itu adalah lebar gambar sebenarnya jika tidak.

Selesai!

Atau, teruslah membaca untuk mendapatkan lebih banyak informasi.

Berikut adalah berbagai opsi HTML dan CSS yang berfungsi sempurna di dalam file penurunan harga:

1. Tengahkan dan konfigurasikan (ubah ukuran) SEMUA gambar dalam file penurunan harga Anda:

Cukup salin dan tempel ini ke bagian atas file penurunan harga Anda untuk memusatkan dan mengubah ukuran semua gambar dalam file tersebut (kemudian masukkan saja gambar yang Anda inginkan dengan sintaks penurunan harga normal):

<style>
img
{
    display:block; 
    float:none; 
    margin-left:auto;
    margin-right:auto;
    width:60%;
}
</style> 

Atau, ini kode yang sama seperti di atas tetapi dengan komentar HTML dan CSS terperinci untuk menjelaskan apa yang sebenarnya terjadi:

<!-- (This is an HTML comment). Copy and paste this entire HTML `<style>...</style>` element (block)
to the top of your markdown file -->
<style>
/* (This is a CSS comment). The below `img` style sets the default CSS styling for all images
hereafter in this markdown file. */
img
{
    /* Default display value is `inline-block`. Set it to `block` to prevent surrounding text from
    wrapping around the image. Instead, `block` format will force the text to be above or below the
    image, but never to the sides. */
    display:block; 
    /* Common float options are `left`, `right`, and `none`. Set to `none` to override any previous
    settings which might have been `left` or `right`. `left` causes the image to be to the left,
    with text wrapped to the right of the image, and `right` causes the image to be to the right,
    with text wrapped to its left, so long as `display:inline-block` is also used. */
    float:none; 
    /* Set both the left and right margins to `auto` to cause the image to be centered. */
    margin-left:auto;
    margin-right:auto;
    /* You may also set the size of the image, in percent of width of the screen on which the image
    is being viewed, for example. A good starting point is 60%. It will auto-scale and auto-size
    the image no matter what screen or device it is being viewed on, maintaining proporptions and 
    not distorting it. */
    width:60%;
    /* You may optionally force a fixed size, or intentionally skew/distort an image by also 
    setting the height. Values for `width` and `height` are commonly set in either percent (%) 
    or pixels (px). Ex: `width:100%;` or `height:600px;`. */
    /* height:400px; */
}
</style> 

Sekarang, apakah Anda memasukkan gambar menggunakan penurunan harga:

![](https://i.stack.imgur.com/RJj4x.png)

Atau HTML dalam file penurunan harga Anda:

<img src="https://i.stack.imgur.com/RJj4x.png"> 

... itu akan dipusatkan secara otomatis dan berukuran hingga 60% dari lebar tampilan layar, seperti yang dijelaskan dalam komentar dalam HTML dan CSS di atas. (Tentu saja ukuran 60% benar-benar mudah diubah juga, dan saya menyajikan cara-cara sederhana di bawah ini untuk melakukannya berdasarkan gambar-demi-gambar juga).

2. Pusatkan dan konfigurasikan gambar berdasarkan kasus per kasus, satu per satu:

Apakah Anda telah menyalin atau menempel <style>blok di atas ke bagian atas file penurunan harga Anda, ini juga akan berfungsi, karena menimpa dan diutamakan daripada pengaturan gaya ruang lingkup file apa pun yang mungkin telah Anda atur di atas:

<img src="https://i.stack.imgur.com/RJj4x.png" style="display:block;float:none;margin-left:auto;margin-right:auto;width:60%"> 

Anda juga dapat memformatnya di beberapa baris, seperti ini, dan masih akan berfungsi:

<img src="https://i.stack.imgur.com/RJj4x.png" 
     alt="this is an optional description of the image to help the blind and show up in case the 
          image won't load" 
     style="display:block; /* override the default display setting of `inline-block` */ 
            float:none; /* override any prior settings of `left` or `right` */ 
            /* set both the left and right margins to `auto` to center the image */
            margin-left:auto; 
            margin-right:auto;
            width:60%; /* optionally resize the image to a screen percentage width if you want too */
            "> 

3. Selain semua hal di atas, Anda juga dapat membuat kelas gaya CSS untuk membantu menyesuaikan dgn mode masing-masing gambar:

Tambahkan semua ini ke bagian atas file penurunan harga Anda.

<style>

/* By default, make all images center-aligned, and 60% of the width 
of the screen in size */
img
{
    display:block; 
    float:none; 
    margin-left:auto;
    margin-right:auto;
    width:60%;
}

/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
    display:inline-block;
    float:left;
    /* provide a 15 pixel gap between the image and the text to its right */
    margin-right:15px; 
}

/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
    display:inline-block;
    float:right;
    /* provide a 15 pixel gap between the image and the text to its left */
    margin-left:15px;
}

</style> 

Sekarang, imgblok CSS Anda telah menetapkan pengaturan default untuk gambar menjadi terpusat dan 60% dari lebar ruang layar dalam ukuran, tetapi Anda dapat menggunakan leftAligndan rightAlignkelas CSS untuk menimpa pengaturan tersebut berdasarkan gambar-demi-gambar.

Misalnya, gambar ini akan sejajar tengah dan berukuran 60% (default saya atur di atas):

<img src="https://i.stack.imgur.com/RJj4x.png"> 

Namun gambar ini akan diratakan dengan pembungkus teks di sebelah kanannya, menggunakan leftAlignkelas CSS yang baru kita buat di atas!

<img src="https://i.stack.imgur.com/RJj4x.png" class="leftAlign">

Mungkin terlihat seperti ini:

Anda masih bisa mengesampingkan salah satu properti CSS melalui styleatribut , namun, seperti lebar, seperti ini:

<img src="https://i.stack.imgur.com/RJj4x.png" class="leftAlign" style="width:20%">

Dan sekarang Anda akan mendapatkan ini:

4. Buat 3 kelas CSS, tetapi jangan ubah imgstandar penurunan harga

Opsi lain untuk apa yang baru saja kami tunjukkan di atas, tempat kami memodifikasi img property:valuepengaturan default dan membuat 2 kelas, adalah membiarkan semua imgproperti penurunan harga default saja, tetapi membuat 3 kelas CSS khusus, seperti ini:

<style>

/* Create a CSS class to style images to center-align */
.centerAlign
{
    display:block;
    float:none;
    /* Set both the left and right margins to `auto` to cause the image to be centered. */
    margin-left:auto;
    margin-right:auto;
    width:60%;
}

/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
    display:inline-block;
    float:left;
    /* provide a 15 pixel gap between the image and the text to its right */
    margin-right:15px; 
    width:60%;
}

/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
    display:inline-block;
    float:right;
    /* provide a 15 pixel gap between the image and the text to its left */
    margin-left:15px;
    width:60%;
}

</style> 

Gunakan mereka, tentu saja, seperti ini:

<img src="https://i.stack.imgur.com/RJj4x.png" class="centerAlign" style="width:20%">

Perhatikan bagaimana saya mengatur widthproperti secara manual menggunakan styleatribut CSS di atas, tetapi jika saya memiliki sesuatu yang lebih rumit yang ingin saya lakukan, saya juga dapat membuat beberapa kelas tambahan seperti ini, menambahkannya di dalam <style>...</style>blok di atas:

/* custom CSS class to set a predefined "small" size for an image */
.small
{
    width:20%;
    /* set any other properties, as desired, inside this class too */
}

Sekarang Anda dapat menetapkan beberapa kelas ke objek yang sama, seperti ini. Cukup pisahkan nama kelas dengan spasi, BUKAN koma . Jika terjadi pengaturan yang bertentangan, saya percaya pengaturan mana yang datang terakhir adalah yang akan berlaku, menimpa pengaturan yang sebelumnya ditetapkan. Ini juga harus menjadi kasus jika Anda menetapkan properti CSS yang sama beberapa kali dalam kelas CSS yang sama atau di dalam styleatribut HTML yang sama .

<img src="https://i.stack.imgur.com/RJj4x.png" class="centerAlign small">

5. Konsolidasi Pengaturan Umum di Kelas CSS:

Trik terakhir adalah yang saya pelajari dalam jawaban ini di sini: Bagaimana saya bisa menggunakan CSS untuk gaya beberapa gambar berbeda? . Seperti yang Anda lihat di atas, ketiga alignkelas CSS mengatur lebar gambar menjadi 60%. Oleh karena itu, pengaturan umum ini dapat diatur sekaligus seperti ini jika diinginkan, maka Anda dapat mengatur pengaturan spesifik untuk setiap kelas setelahnya:

<style>

/* set common properties for multiple CSS classes all at once */
.centerAlign, .leftAlign, .rightAlign {
    width:60%;
}

/* Now set the specific properties for each class individually */

/* Create a CSS class to style images to center-align */
.centerAlign
{
    display:block;
    float:none;
    /* Set both the left and right margins to `auto` to cause the image to be centered. */
    margin-left:auto;
    margin-right:auto;
}

/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
    display:inline-block;
    float:left;
    /* provide a 15 pixel gap between the image and the text to its right */
    margin-right:15px; 
}

/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
    display:inline-block;
    float:right;
    /* provide a 15 pixel gap between the image and the text to its left */
    margin-left:15px;
}

/* custom CSS class to set a predefined "small" size for an image */
.small
{
    width:20%;
    /* set any other properties, as desired, inside this class too */
}

</style> 

Keterangan lebih lanjut:

1. Pikiranku tentang HTML dan CSS dalam penurunan harga

Sejauh yang saya ketahui, apa pun yang dapat ditulis dalam dokumen penurunan harga dan mendapatkan hasil yang diinginkan adalah semua yang kita kejar, bukan sintaks "penurunan harga murni".

Dalam C dan C ++, kompiler mengkompilasi ke kode assembly, dan assembly kemudian dirakit menjadi biner. Namun, kadang-kadang, Anda memerlukan kontrol tingkat rendah yang hanya dapat disediakan oleh rakitan, sehingga Anda dapat menulis rakitan inline tepat di dalam file sumber C atau C ++. Assembly adalah bahasa "level bawah" dan dapat ditulis tepat di dalam C dan C ++.

Begitu juga dengan penurunan harga. Penurunan harga adalah bahasa tingkat tinggi yang ditafsirkan ke HTML dan CSS. Namun, di mana kita memerlukan kontrol tambahan, kita bisa "menyejajarkan" HTML dan CSS tingkat rendah di dalam file markdown kita, dan itu masih akan ditafsirkan dengan benar. Karena itu, dalam arti tertentu, HTML dan CSS adalah sintaks "markdown" yang valid.

Jadi, untuk memusatkan gambar dalam penurunan harga, gunakan HTML dan CSS.

2. Penyisipan gambar standar dalam penurunan harga:

Cara menambahkan gambar dasar dalam penurunan harga dengan format HTML dan CSS "di belakang layar" default:

Penurunan harga ini:

![](https://i.stack.imgur.com/RJj4x.png)

Akan menghasilkan output ini:

Ini adalah hexacopter penembakan api yang saya buat .

Anda juga dapat secara opsional menambahkan deskripsi di tanda kurung siku. Jujur saya bahkan tidak yakin apa yang dilakukannya, tapi mungkin itu akan dikonversi menjadi atribut elemen HTML<img>alt , yang akan ditampilkan seandainya gambar tidak dapat memuat, dan dapat dibaca oleh pembaca layar untuk orang buta. Jadi, penurunan harga ini:

![this is my hexacopter I built](https://i.stack.imgur.com/RJj4x.png)

juga akan menghasilkan output ini:

3. Lebih detail tentang apa yang terjadi dalam HTML / CSS saat memusatkan dan mengubah ukuran gambar dalam penurunan harga:

Memusatkan gambar dalam penurunan harga mengharuskan kami menggunakan kontrol ekstra yang dapat diberikan langsung oleh HTML dan CSS. Anda dapat menyisipkan dan menempatkan gambar individual di tengah seperti ini:

<img src="https://i.stack.imgur.com/RJj4x.png" 
     alt="this is my hexacopter I built" 
     style="display:block; 
            float:none; 
            margin-left:auto; 
            margin-right:auto;
            "> 

Ini info lebih lanjut. tentang apa yang terjadi di sini:

1. Bagian <imgdari kode di atas adalah " tag awal " HTML , sedangkan >pada akhirnya adalah " tag akhir " HTML .
2. Semuanya, mulai dari tag awal hingga tag akhir, inklusif, membentuk img" elemen " HTML ini .
3. HTML img "tag" / "elemen" yang digunakan untuk menyisipkan gambar ke dalam HTML.
4. Setiap tugas di dalam elemen mengkonfigurasi " atribut " HTML .
5. The "gaya" atribut menerima CSS styling , sehingga segala sesuatu di dalam tanda kutip ganda di sini: style=""adalah CSS property:valuenilai kunci " deklarasi ".
   1. Perhatikan bahwa setiap "properti: deklarasi nilai" CSS dipisahkan oleh tanda titik koma ( ;), sedangkan setiap "atribut" HTML dalam "elemen" ini dipisahkan oleh spasi ( ).
6. Untuk membuat gambar terpusat dalam kode HTML dan CSS kami di atas, "atribut" kuncinya adalah yang srcdan style.
7. Yang altsatu adalah opsional.
8. Di dalam HTML styleatribut, yang menerima CSS styling, deklarasi kunci semua 4 yang saya tampilkan: display:block, float:none, margin-left:auto, dan margin-right:auto.
   1. Jika sebelumnya tidak ada yang mengatur float properti , maka Anda dapat meninggalkan deklarasi ini, tetapi tetap ide yang bagus untuk berjaga-jaga.
   2. Jika pertama kali belajar cara memusatkan gambar menggunakan HTML dan CSS di sini: https://www.w3schools.com/howto/howto_css_image_center.asp .
9. CSS menggunakan komentar gaya-C ( /* my comment */).

Referensi:

1. Baca lebih lanjut tentang Sintaks CSS di sini: https://www.w3schools.com/css/css_syntax.asp
2. Baca tentang "Tag HTML vs Elemen" di sini .
3. Saya melakukan banyak praktik penataan gaya HTML dan CSS di GitHub penurunan harga saya di sini: https://github.com/ElectricRCAircraftGuy/Arduino-STEM-Presentation
4. Saya belajar hampir semua yang saya ketahui tentang HTML dan CSS dengan mengklik di w3schools.com. Inilah beberapa halaman spesifik:
   1. %%%%% https://www.w3schools.com/howto/howto_css_image_center.asp
   2. https://www.w3schools.com/css/css_float.asp
      1. https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float2
   3. https://www.w3schools.com/css/css3_images.asp
   4. https://www.w3schools.com/tags/default.asp
   5. Komentar HTML dan CSS: https://www.w3schools.com/css/css_comments.asp
5. Hexacopter penembakan-api yang saya buat: https://www.electricrcaircraftguy.com/2016/05/battlebots-season-2-buzz-fire-drone.html

Pendekatan markdown "murni" yang dapat menangani ini adalah menambahkan gambar ke tabel dan kemudian memusatkan sel:

| ![Image](img.png) |
| :--: | 

Seharusnya menghasilkan HTML yang mirip dengan ini:

<table>
    <thead>
        <tr>
            <th style="text-align:center;"><img src="img.png" alt="Image"></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Ini sebenarnya cukup sederhana.

-> This is centered Text <-

Jadi dengan mengingat hal itu Anda dapat menerapkan ini pada sintaks img.

->![alt text](/link/to/img)<-