GitHub'da bir süredir kullanılan işaretleme sözdizimine bakıyorum, ancak bir görüntüyü readme.md sayfası boyutunda yeniden boyutlandırma dışında, görüntüyü nasıl ortalayacağımı anlayamıyorum.

Mümkün mü? Eğer öyleyse, nasıl?

Github'da kullanılan markdown sözdizimine bakıyordum [...], bir görüntüyü nasıl ortalayacağımı anlayamıyorum

TL; DR

Hayır, yalnızca Markdown sözdizimine güvenerek yapamazsınız . Markdown konumlandırma ile ilgilenmez.

Not: Bazı etiketleme işlemcileri HTML'nin eklenmesini destekler (@ waldyr.ar tarafından doğru bir şekilde belirtildiği gibi) ve GitHub durumunda böyle bir şeye geri dönebilirsiniz <div style="text-align:center"><img src="..." /></div>. Deponuz farklı bir barındırma ortamında çatallanırsa (Codeplex, BitBucket, ...) veya belge bir tarayıcı aracılığıyla okunmuyorsa (Yüce Metin İşaretleme önizlemesi, MarkdownPad, VisualStudio Web), resmin ortalanacağının garantisi olmadığına dikkat edin. Temel İşaretleme önizlemesi, ...).

Not 2: GitHub web sitesinde bile, işaretlemenin oluşturulma biçiminin aynı olmadığını unutmayın. Örneğin wiki, bu tür css konumsal hilelerine izin vermez.

Kısaltılmamış sürüm

Markdown sözdizimi bir görüntü konumunu kontrol etmek yeteneğine sahip bir sağlamaz.

Aslında, "Felsefe" bölümünde belirtildiği gibi bu biçimlendirmeye izin vermek Markdown felsefesine karşı sınırda olacaktır.

"Markdown biçimli bir belge, etiketler veya biçimlendirme talimatları ile işaretlenmiş gibi görünmeden, olduğu gibi, düz metin olarak yayınlanabilir olmalıdır."

Markdown dosyaları github.com web sitesi tarafından Ruby Redcarpet kütüphanesi kullanılarak oluşturulur.

Redcarpet , standart Markdown sözdiziminin bir parçası olmayan ve ek "özellikler" sağlayan bazı uzantılar (örneğin üstü çizili gibi) ortaya çıkarır . Ancak, desteklenen bir uzantı görüntüyü ortalamanıza izin vermez.

Bu Github'ın desteğinden:

Selam Waldyr,

Markdown, hizalamayı doğrudan değiştirmenize izin vermez (buradaki dokümanlara bakın: http://daringfireball.net/projects/markdown/syntax#img ), ancak ham bir HTML 'img' etiketi kullanabilir ve hizalamayı satır içi ile yapabilirsiniz css.

Alkış,

Böylece görüntüleri hizalamak mümkün! Sorunu çözmek için satır içi css kullanmanız yeterlidir. Github Repo'mdan bir örnek alabilirsin . README.md'in altında ortalanmış hizalanmış bir görüntü vardır. Basitlik için şunları yapabilirsiniz:

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

Her ne kadar, nulltoken'in dediği gibi, Markdown felsefesine karşı sınırda olacaktır!

Benioku bu kod :

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

GitHub'da görüntülendiğinde ortalanmış olanlar dışında bu görüntü çıktısını üretir:

Alternatif olarak, css üzerinde kontrolünüz varsa, url parametreleri ve css ile akıllıca alabilirsiniz .

Markdown:

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

Ve CSS:

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

Bu şekilde çeşitli stil seçenekleri oluşturabilir ve yine de işaretlemeyi ekstra koddan temiz tutabilirsiniz. Tabii ki bir başkası işaretlemeyi başka bir yerde kullanıyorsa ne olacağı üzerinde hiçbir kontrole sahip değilsiniz, ancak bir kişinin paylaştığı tüm işaretleme belgelerinde genel bir stil sorunu var.

İçin sol hizalama

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

İçin Doğru hizalama

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

Ve merkez hizalaması için

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

Bunu çatal burada bu yararlı bulursanız, gelecek referanslar için.

Github'da benim için çalışıyor

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

Ayrıca görüntüyü istediğiniz genişlik ve yüksekliğe yeniden boyutlandırabilirsiniz . Örneğin:

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

Görüntüye ortalanmış bir resim yazısı eklemek için yalnızca bir satır daha:

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

Neyse ki, bu hem README.md hem de GitHub Wiki sayfaları için çalışır.

Bunu kullanabiliriz. Lütfen ur img dosyasının src konumunu git klasöründen değiştirin ve img yüklü değilse alternatif metin ekleyin

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

Sadece Readme.mddosyaya gidin ve bu kodu kullanın.

<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> sayfadaki her şeye uyar ve sayfayı sayfanın boyutlarına göre hizalar.

Cevabı yerel görüntüleri destekleyecek şekilde biraz genişletmek için, görüntü yolunuzu değiştirin FILE_PATH_PLACEHOLDER ve bakın.

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

Görüntü konumlandırma ile ilgili sorunu çözme yolum HTML özniteliklerini kullanmaktı:

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

Görüntü en azından yerel VS markdown oluşturucumda yeniden boyutlandırıldı ve ortalandı.

Sonra, değişiklikleri repo itti ve ne yazık ki GitHub README.md dosyası için çalışmadığını fark ettim . Yine de bu cevabı başka birine yardımcı olabileceği için bırakacağım.

Sonunda, bunun yerine iyi eski HTML etiketi kullanarak sona erdi:

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

Ama tahmin et ne oldu? Bazı JS yöntemi styleözniteliğimin yerini aldı ! Denedim bileclass özniteliği ve aynı sonuçla!

Sonra daha eski okul HTML kullanılan aşağıdaki gist sayfasını bulduk :

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

Bu iyi çalışıyor ancak, başka yorum yapmadan bırakmak istiyorum ...

Bunu başarabilen "saf" bir işaretleme yaklaşımı, görüntüyü bir tabloya eklemek ve sonra hücreyi ortalamaktır:

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

Buna benzer HTML üretmelidir:

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

TLDR;

Bir görüntü eklemek ve ortalamak ve boyutunu, genellikle iyi bir başlangıç ​​değeri olan işaretleme dosyanızın içindeki ekran alanı genişliğinin% 60'ına ayarlamak için bu HTML / CSS'yi kullanın:

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

Değiştir widthCSS değerini istediğiniz yüzde olarak veya görüntü ekrandan daha büyükse ekran genişliğinin% 100'ü olduğunu veya aksi takdirde gerçek görüntü genişliğini düşündüğüm işaretleme varsayılan boyutunu kullanmak için tamamen kaldırın.

Bitti!

Veya daha fazla bilgi için okumaya devam edin.

Markdown dosyalarında mükemmel çalışan çeşitli HTML ve CSS seçenekleri şunlardır:

1. İşaretleme dosyanızdaki TÜM resimleri ortalayın ve yapılandırın (yeniden boyutlandırın):

Dosyadaki tüm resimleri ortalamak ve yeniden boyutlandırmak için bunu kopyalayıp markdown dosyanızın üstüne yapıştırın (daha sonra normal markdown sözdizimi ile istediğiniz resimleri ekleyin):

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

Veya yukarıdakiyle aynı kod var, ancak neler olup bittiğini tam olarak açıklamak için ayrıntılı HTML ve CSS yorumları ile:

<!-- (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> 

Şimdi, işaretleme kullanarak bir resim ekleyip eklemediğiniz:

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

Veya etiketleme dosyanızdaki HTML:

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

... yukarıdaki HTML ve CSS içindeki yorumlarda açıklandığı gibi, otomatik olarak ortalanacak ve ekran görüntüleme genişliğinin% 60'ına kadar boyutlandırılacaktır. (Tabii ki% 60 boyutu da gerçekten kolayca değiştirilebilir ve ben de bunu görüntü-görüntü temelinde yapmanın basit yollarını sunuyorum).

2. Görüntüleri birer birer tek tek ortalayın ve yapılandırın:

Yukarıdaki <style>bloğu işaretleme dosyanızın üstüne kopyalayıp yapıştırmadığınızdan bağımsız olarak, yukarıda ayarlamış olabileceğiniz herhangi bir dosya kapsamı stili ayarını geçersiz kıldığı ve önceliğe sahip olduğu için bu da işe yarayacaktır:

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

Ayrıca, bunun gibi birden çok satırda biçimlendirebilirsiniz ve yine de çalışır:

<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. Yukarıdakilerin hepsine ek olarak, tek tek resimlerin stilize edilmesine yardımcı olmak için CSS stili sınıfları da oluşturabilirsiniz :

Bütün bunları markdown dosyanızın üstüne ekleyin.

<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> 

Şimdi, imgCSS bloğunuz ortalanacak görüntüler için varsayılan ayarı ve ekran alanının genişliğinin% 60'ını boyut olarak ayarladı, ancak bu ayarları görüntü bazında geçersiz kılmak için leftAlignve rightAlignCSS sınıflarını kullanabilirsiniz.

Örneğin, bu görüntü merkeze hizalanmış ve% 60 boyutunda olacaktır (yukarıda ayarladığım varsayılan):

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

Ancak bu görüntü, yukarıda oluşturduğumuz CSS sınıfını kullanarak metin sağa kaydırılarak sola hizalanacaktırleftAlign !

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

Şöyle görünebilir:

Hala edebilirsiniz aracılığıyla kendi CSS özellikleri herhangi birini geçersiz styleöznitelik böyle genişlik gibi, ancak,:

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

Ve şimdi bunu alacaksınız:

4. 3 CSS sınıfı oluşturun, ancak işaretleme imgvarsayılanlarını değiştirmeyin

Yukarıda gösterdiğimiz, varsayılan img property:valueayarları değiştirdiğimiz ve 2 sınıf oluşturduğumuz başka bir seçenek de , tüm varsayılan işaretleme imgözelliklerini tek başına bırakmak , ancak 3 özel CSS sınıfı oluşturmaktır:

<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> 

Onları elbette şu şekilde kullanın:

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

Yukarıdaki widthCSS styleözniteliğini kullanarak özelliği el ile nasıl ayarladığımı fark ettim , ancak yapmak istediğim daha karmaşık bir şeyim olsaydı, bu gibi ek sınıflar da oluşturabilirim.<style>...</style> yukarıdaki blok :

/* 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 */
}

Şimdi aynı nesneye böyle birden fazla sınıf atayabilirsiniz. Basitçe bir boşluk DEĞİL virgül ile ayrı sınıf isimleri . Çakışan ayarlarda, hangi ayarın en son geldiğinin geçerli olacak ve daha önce ayarlanmış ayarları geçersiz kılacağına inanıyorum . Aynı CSS özelliklerini aynı CSS sınıfında veya aynı HTML styleözniteliğinde birden çok kez ayarlamanız durumunda da durum böyle olmalıdır .

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

5. CSS Sınıflarındaki Ortak Ayarları Birleştirin:

Son püf noktası bu cevapta öğrendiğim bir şey: Birden fazla görüntüyü farklı şekillerde biçimlendirmek için CSS'yi nasıl kullanabilirim? . Yukarıda da görebileceğiniz gibi, CSS alignsınıflarının 3'ü de görüntü genişliğini% 60 olarak ayarlar. Bu nedenle, isterseniz bu ortak ayar aynı anda ayarlanabilir, daha sonra her sınıf için belirli ayarları daha sonra ayarlayabilirsiniz:

<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> 

Daha fazla detay:

1. Markdown'da HTML ve CSS ile ilgili düşüncelerim

Bildiğim kadarıyla, bir markdown belgesinde yazılabilecek ve istenen sonucu elde edebilecek her şey, bazı "saf markdown" sözdizimi değil, peşinde olduğumuz şeydir.

C ve C ++ 'da, derleyici derleme kodunu derler ve derleme daha sonra ikili olarak birleştirilir. Ancak bazen, yalnızca derlemenin sağlayabileceği düşük düzeyli denetime gereksinim duyarsınız ve böylece bir C veya C ++ kaynak dosyasının içine satır içi derleme yazabilirsiniz. Montaj "düşük seviye" dildir ve doğrudan C ve C ++ 'da yazılabilir.

Yani markdown ile. Markdown, HTML ve CSS olarak yorumlanan üst düzey dildir. Ancak, ekstra kontrole ihtiyaç duyduğumuzda, alt düzey HTML ve CSS'yi doğrudan işaretleme dosyamızın içinde "satır içi" yapabiliriz ve yine de doğru şekilde yorumlanır. Bir anlamda, bu nedenle, HTML ve CSS vardır geçerli "markdown" sözdizimi.

Bu nedenle, bir resmi markdown'da ortalamak için HTML ve CSS kullanın.

2. İşaretlemede standart resim ekleme:

Varsayılan "sahne arkası" HTML ve CSS biçimlendirmesi ile işaretlemede temel bir resim nasıl eklenir:

Bu işaretleme:

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

Bu çıktıyı üretecek:

Bu yaptığım ateş eden hexacopter'im .

İsteğe bağlı olarak, açılış köşeli parantezlere bir açıklama ekleyebilirsiniz. Dürüst olmak gerekirse bunun ne olduğundan emin değilim, ama belki de görüntünün yüklenememesi durumunda görüntülenen ve kör için ekran okuyucular tarafından okunabilen bir HTML <img>öğesi altözelliğine dönüştürülür . Bu işaretleme:

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

bu çıktıyı da üretecek:

3. Markdown'da bir görüntüyü ortalarken ve yeniden boyutlandırırken HTML / CSS'de neler olduğuna ilişkin daha fazla ayrıntı:

Görüntüyü markdown'da ortalamak, HTML ve CSS'nin bize doğrudan verebileceği ekstra kontrolü kullanmamızı gerektirir. Aşağıdaki gibi ayrı bir resim ekleyebilir ve ortalayabilirsiniz:

<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;
            "> 

İşte daha fazla bilgi. burada neler olduğuna dair:

1. <imgYukarıdaki kod parçası HTML "dir etiketi başlatın ederken," >sonunda HTML "dir bitiş etiketi ".
2. Başlangıç ​​etiketinden bitiş etiketine kadar her şey bu HTML img" öğesini oluşturur " oluşturur.
3. HTML img "etiketler" / "öğeler" HTML'ye resim eklemek için kullanılır.
4. Öğenin içindeki atamaların her biri bir HTML " özelliği yapılandırıyor " .
5. "Stil" özniteliği kabul eden CSS stil : Burada çift tırnak içine herşey çok, style=""CSS olan property:valueanahtar-değer " beyanı ".
   1. Her CSS "property: value declaration" ifadesinin noktalı virgül ( ;) ile ayrıldığını, bu "element" içindeki her HTML "özniteliğinin" bir boşluk ( ) ile ayrıldığını unutmayın .
6. Anahtar "özellikleri" Yukarıdaki HTML ve CSS kodunu merkeze görüntü elde etmek vardır basitçe srcvestyle olanları.
7. altBir isteğe bağlıdır.
8. HTML İçinde styleCSS stilinde kabul özniteliği anahtar bildirimleri tüm 4 ı gösteriyor ki: display:block, float:none, margin-left:auto, vemargin-right:auto .
   1. Daha önce hiçbir şey özelliği ayarlamazsafloat önce, o zaman bu bildiriyi kapalı bırakabilirsiniz, ama her ihtimale karşı yine de olması iyi bir fikirdir.
   2. İlk olarak HTML ve CSS kullanarak bir görüntüyü nasıl ortalayacağınızı burada öğrendiyseniz: https://www.w3schools.com/howto/howto_css_image_center.asp .
9. CSS, C stili yorumları ( /* my comment */) kullanır .

Referanslar:

1. CSS Sözdizimi hakkında daha fazla bilgiyi buradan edinebilirsiniz: https://www.w3schools.com/css/css_syntax.asp
2. Burada "HTML Etiketleri ve Öğeler" hakkında bilgi edinin .
3. GitHub işaretleme benioku dosyamda HTML ve CSS stil uygulamamın çoğunu burada yaptım: https://github.com/ElectricRCAircraftGuy/Arduino-STEM-Presentation
4. W3schools.com'u tıklayarak HTML ve CSS hakkında bildiğim her şeyi öğrendim. İşte birkaç özel sayfa:
   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. HTML ve CSS yorumları: https://www.w3schools.com/css/css_comments.asp
5. Yaptığım ateş eden hexacopter'im: https://www.electricrcaircraftguy.com/2016/05/battlebots-season-2-buzz-fire-drone.html

Bu gerçekten oldukça basit.

-> This is centered Text <-

Bunu akılda tutarak bunu img sözdizimine uygulayabilirsiniz.

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