Przyglądam się składni Markdown używanej w GitHub, ale oprócz zmiany rozmiaru obrazu do rozmiaru strony readme.md, nie mogę wymyślić, jak wyśrodkować na nim obraz.

Czy to możliwe? Jeśli tak, to w jaki sposób?

Przyglądałem się składni Markdown stosowanej w github [...], nie mogę wymyślić, jak wyśrodkować obraz

TL; DR

Nie, nie możesz polegać tylko na składni Markdown. Markdown nie przejmuje się pozycjonowaniem.

Uwaga: Niektóre procesory przeceny obsługują włączenie HTML (jak słusznie zauważył @ waldyr.ar), aw przypadku GitHub możesz wrócić do czegoś podobnego <div style="text-align:center"><img src="..." /></div>. Uważaj, że nie ma gwarancji, że obraz zostanie wyśrodkowany, jeśli twoje repozytorium jest rozwidlone w innym środowisku hostingowym (Codeplex, BitBucket, ...) lub jeśli dokument nie zostanie odczytany przez przeglądarkę (podgląd Sublime Text Markdown, MarkdownPad, VisualStudio Web Podgląd Essentials Markdown, ...).

Uwaga 2: Pamiętaj, że nawet w witrynie GitHub sposób renderowania przeceny nie jest jednolity. Na przykład wiki nie zezwala na takie sztuczki pozycyjne css.

Nieokreślona wersja

Składni Markdown nie przewiduje jedną z możliwości kontrolowania położenia obrazu.

W rzeczywistości, byłoby granicę przeciwko filozofii Markdown, aby umożliwić takie formatowanie, jak podano w „filozofii” sekcji

„Dokument sformatowany metodą Markdown powinien być dostępny do opublikowania w postaci niezmienionej, jako zwykły tekst, nie wyglądając, jakby został oznaczony tagami lub instrukcjami formatowania”.

Pliki Markdown są renderowane przez witrynę github.com za pomocą biblioteki Ruby Redcarpet .

Redcarpet udostępnia niektóre rozszerzenia (takie jak na przykład przekreślenie), które nie są częścią standardowej składni Markdown i zapewniają dodatkowe „funkcje”. Jednak żadne obsługiwane rozszerzenie nie pozwala wyśrodkować obrazu.

Wynika to ze wsparcia Github:

Hej Waldyr

Markdown nie pozwala na bezpośrednie dostosowanie wyrównania (zobacz dokumenty tutaj: http://daringfireball.net/projects/markdown/syntax#img ), ale możesz po prostu użyć surowego znacznika HTML „img” i wykonać wyrównanie za pomocą funkcji wstawiania css.

Twoje zdrowie,

Tak więc możliwe jest, aby wyrównać obrazy! Musisz tylko użyć wbudowanego css, aby rozwiązać problem. Możesz wziąć przykład z mojego repozytorium github . Na dole pliku README.md znajduje się wyśrodkowany, wyrównany obraz. Dla uproszczenia możesz po prostu wykonać następujące czynności:

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

Chociaż, jak powiedział nulltoken, byłoby to sprzeczne z filozofią Markdown!

Ten kod z mojego pliku Readme :

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

Powoduje wyświetlenie tego obrazu wyjściowego, z wyjątkiem wyśrodkowania podczas przeglądania w GitHub:

Alternatywnie, jeśli masz kontrolę nad css, możesz uzyskać sprytne parametry URL i css .

Obniżka cen:

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

I CSS:

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

W ten sposób możesz stworzyć różnorodne opcje stylizacji i nadal utrzymywać obniżkę dodatkowego kodu. Oczywiście nie masz kontroli nad tym, co się stanie, jeśli ktoś inny użyje przeceny gdzie indziej, ale jest to ogólny problem ze stylem wszystkich dokumentów przeceny, które się dzieli.

Do wyrównania do lewej

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

Dla właściwego wyrównania

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

I do wyrównania do środka

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

Rozwidl tutaj , aby znaleźć w przyszłości odniesienia, jeśli uznasz to za przydatne.

Działa dla mnie na github

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

Możesz także zmienić rozmiar obrazu do pożądanej szerokości i wysokości . Na przykład:

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

Aby dodać wyśrodkowany podpis do obrazu, wystarczy jeszcze jedna linia:

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

Na szczęście działa to zarówno dla README.md, jak i stron Wiki GitHub.

Możemy to wykorzystać. Zmień lokalizację src ur img z folderu git i dodaj alternatywny tekst, jeśli img nie jest załadowany

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

Wystarczy przejść do Readme.mdpliku i użyć tego kodu.

<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> pasuje do wszystkiego na stronie, a środek wyrównuje go zgodnie z wymiarami strony.

Aby nieco rozszerzyć odpowiedź na obsługę lokalnych obrazów, po prostu zastąp FILE_PATH_PLACEHOLDER ścieżkę obrazu i sprawdź ją.

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

Moim sposobem rozwiązania problemu z pozycjonowaniem obrazu było użycie atrybutów HTML:

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

Rozmiar obrazu został odpowiednio przeskalowany i wyśrodkowany, przynajmniej w moim lokalnym rendererze przeceny VS.

Następnie przekazałem zmiany do repozytorium i niestety zdałem sobie sprawę, że nie działa on dla pliku README.md GitHub . Niemniej jednak zostawię tę odpowiedź, ponieważ może pomóc komuś innemu.

W końcu zamiast tego użyłem starego dobrego tagu HTML:

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

Ale zgadnij co? Niektóre metody JS zastąpiły mój styleatrybut! Próbowałem nawet classatrybutu i z tym samym rezultatem!

Potem znalazłem następującą stronę gist, na której użyto jeszcze więcej oldschoolowego kodu HTML:

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

Ten działa dobrze, jednak chciałbym go zostawić bez dalszych komentarzy ...

„Czystym” podejściem do markdown, które może sobie z tym poradzić, jest dodanie obrazu do tabeli, a następnie wyśrodkowanie komórki:

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

Powinien generować HTML podobny do tego:

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

TLDR;

Użyj tego HTML / CSS, aby dodać i wyśrodkować obraz i ustawić jego rozmiar na 60% szerokości miejsca na ekranie w pliku znaczników, co zwykle jest dobrą wartością początkową:

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

Zmień widthwartość CSS na dowolny procent lub usuń ją całkowicie, aby użyć domyślnego rozmiaru znacznika, który moim zdaniem wynosi 100% szerokości ekranu, jeśli obraz jest większy niż ekran, lub w przeciwnym razie jest to rzeczywista szerokość obrazu.

Gotowy!

Lub czytaj dalej, aby uzyskać znacznie więcej informacji.

Oto różne opcje HTML i CSS, które doskonale działają w plikach Markdown:

1. Wyśrodkuj i skonfiguruj (zmień rozmiar) WSZYSTKIE obrazy w pliku przeceny:

Po prostu skopiuj i wklej to na górze pliku Markdown, aby wyśrodkować i zmienić rozmiar wszystkich obrazów w pliku (a następnie wstaw dowolne obrazy z normalną składnią Markdown):

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

Lub ten sam kod jak powyżej, ale ze szczegółowymi komentarzami HTML i CSS, aby dokładnie wyjaśnić, co się dzieje:

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

Teraz, czy wstawisz obraz za pomocą markdown:

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

Lub HTML w pliku przeceny:

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

... zostanie automatycznie wyśrodkowany i dopasowany do 60% szerokości widoku ekranu, jak opisano w komentarzach w HTML i CSS powyżej. (Oczywiście rozmiar 60% jest również bardzo łatwo zmienialny, a poniżej przedstawiam proste sposoby, aby zrobić to na zasadzie obraz po obrazie).

2. Wyśrodkuj i skonfiguruj obrazy indywidualnie dla każdego przypadku:

Niezależnie od tego, czy skopiowałeś i wkleiłeś powyższy <style>blok w górnej części pliku przeceny, zadziała to również, ponieważ zastępuje i ma pierwszeństwo przed ustawieniami stylu zakresu plików, które możesz ustawić powyżej:

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

Możesz również sformatować go w wielu liniach, takich jak ten, i nadal będzie działać:

<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. Oprócz wszystkich powyższych, możesz także tworzyć klasy stylów CSS, aby pomóc stylizować poszczególne obrazy:

Dodaj to wszystko na początku pliku przeceny.

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

Teraz twój imgblok CSS ustawił domyślne ustawienie dla obrazów, które mają być wyśrodkowane i 60% szerokości przestrzeni ekranu, ale możesz użyć klas leftAligni rightAlignCSS, aby zastąpić te ustawienia dla poszczególnych obrazów.

Na przykład ten obraz będzie wyśrodkowany i ma 60% rozmiaru (domyślnie ustawiłem powyżej):

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

Ten obraz zostanie wyrównany do lewej strony , z zawijaniem tekstu po prawej stronie, przy użyciu leftAlignklasy CSS, którą właśnie stworzyliśmy powyżej!

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

Może to wyglądać tak:

Nadal możesz zastąpić dowolne z jego właściwości CSS za pomocą styleatrybutu , takiego jak szerokość, jak poniżej:

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

A teraz dostaniesz to:

4. Utwórz 3 klasy CSS, ale nie zmieniaj imgdomyślnych wartości przeceny

Inną opcją tego, co właśnie pokazaliśmy powyżej, w którym zmodyfikowaliśmy img property:valueustawienia domyślne i utworzyliśmy 2 klasy, jest pozostawienie wszystkich domyślnych imgwłaściwości Markdown w spokoju, ale utworzenie 3 niestandardowych klas CSS, takich jak to:

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

Używaj ich oczywiście w ten sposób:

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

Zauważ, jak ręcznie ustawiłem widthwłaściwość za pomocą stylepowyższego atrybutu CSS , ale gdybym miał coś bardziej skomplikowanego, co chciałem zrobić, mógłbym również utworzyć dodatkowe klasy, dodając je wewnątrz <style>...</style>powyższego bloku:

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

Teraz możesz przypisać wiele klas do tego samego obiektu, jak ten. Po prostu oddziel nazwy klas spacjami, NIE przecinkami . W przypadku sprzecznych ustawień uważam, że którekolwiek ustawienie będzie ostatnie, będzie obowiązywać, zastępując wszelkie wcześniej ustawione ustawienia. Powinno tak być również w przypadku, gdy ustawisz te same właściwości CSS wiele razy w tej samej klasie CSS lub w tym samym styleatrybucie HTML .

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

5. Skonsoliduj wspólne ustawienia w klasach CSS:

Ostatnią sztuczką jest ta, której nauczyłem się w tej odpowiedzi tutaj: Jak używać CSS do stylizowania wielu obrazów w inny sposób? . Jak widać powyżej, wszystkie 3 alignklasy CSS ustawiają szerokość obrazu na 60%. Dlatego to wspólne ustawienie można ustawić jednocześnie tak, jak chcesz, a następnie możesz ustawić szczegółowe ustawienia dla każdej klasy:

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

Więcej szczegółów:

1. Moje przemyślenia na temat HTML i CSS w Markdown

Jeśli o mnie chodzi, wszystko, co można zapisać w dokumencie Markdown i uzyskać pożądany wynik, to wszystko, czego szukamy, a nie jakaś składnia „czystego Markdown”.

W C i C ++ kompilator kompiluje się do kodu asemblera, a następnie asembluje się do binarnego. Czasami jednak potrzebna jest kontrola niskiego poziomu, którą może zapewnić tylko zestaw, a więc można napisać zestaw wbudowany bezpośrednio w pliku źródłowym C lub C ++. Asembler jest językiem „niższego poziomu” i można go pisać bezpośrednio w C i C ++.

Tak też jest ze zniżką. Markdown to język wysokiego poziomu, który jest interpretowany do HTML i CSS. Jednak tam, gdzie potrzebujemy dodatkowej kontroli, możemy po prostu „wstawić” niższy poziom HTML i CSS bezpośrednio do naszego pliku przeceny i nadal będzie on interpretowany poprawnie. W pewnym sensie zatem HTML i CSS są poprawną składnią „markdown”.

Tak więc, aby wyśrodkować obraz na przecenie, użyj HTML i CSS.

2. Standardowe wstawianie obrazu w przecenach:

Jak dodać podstawowy obraz w przecenie z domyślnym formatowaniem HTML i CSS „za kulisami”:

Ta obniżka:

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

Wyprodukuje ten wynik:

Oto mój heksakopter strzelający ogniem .

Możesz również opcjonalnie dodać opis w nawiasach kwadratowych otwierających. Szczerze mówiąc, nie jestem nawet pewien, co to robi, ale być może jest konwertowany na atrybut elementu HTML<img>alt , który jest wyświetlany w przypadku, gdy obraz nie może się załadować, i może być czytany przez czytniki ekranu dla osób niewidomych. A więc to przecena:

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

wygeneruje również ten wynik:

3. Więcej szczegółów na temat tego, co dzieje się w HTML / CSS podczas centrowania i zmiany rozmiaru obrazu w znaczniku:

Wyśrodkowanie obrazu w systemie Markdown wymaga użycia dodatkowej kontroli, którą HTML i CSS mogą nam dać bezpośrednio. Możesz wstawić i wyśrodkować indywidualny obraz w ten sposób:

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

Oto więcej informacji. o tym, co się tutaj dzieje:

1. <imgCzęść powyższego kodu HTML jest „ rozpocząć tag ”, a >na końcu jest HTML „ tag end ”.
2. Wszystko, od tagu początkowego do tagu końcowego, włącznie, tworzy ten img„ element ” HTML .
3. HTML img „tags” / „elementy” są używane do wstawiania obrazów w HTML.
4. Każde z przypisań w elemencie konfiguruje „ atrybut ” HTML .
5. Atrybutu „style” akceptuje CSS stylizacji , więc wszystko wewnątrz cudzysłów tutaj: style=""jest CSS property:valueklucz-wartość „ deklaracja ”.
   1. Zauważ, że każda CSS „właściwość: deklaracja wartości” jest oddzielona średnikiem ( ;), podczas gdy każdy „atrybut” HTML w tym „elemencie” jest oddzielony spacją ( ).
6. Aby uzyskać obraz do centrum w naszym kodzie HTML i CSS powyżej przycisk „atrybutów” są po prostu srci stylete.
7. Ten altjest opcjonalny.
8. Wewnątrz HTML styleatrybutu, który akceptuje CSS stylizacji, najważniejsze deklaracje są wszystkie 4 pokazują, że: display:block, float:none, margin-left:auto, i margin-right:auto.
   1. Jeśli wcześniej nic nie ustawiało tej float właściwości , możesz pominąć tę deklarację, ale i tak warto ją mieć na wszelki wypadek.
   2. Jeśli po raz pierwszy dowiedziałeś się, jak wyśrodkować obraz za pomocą HTML i CSS tutaj: https://www.w3schools.com/howto/howto_css_image_center.asp .
9. CSS używa komentarzy w stylu C ( /* my comment */).

Bibliografia:

1. Przeczytaj więcej o składni CSS tutaj: https://www.w3schools.com/css/css_syntax.asp
2. Przeczytaj o „Tagi HTML a elementy” tutaj .
3. Dużo ćwiczyłem stylizację HTML i CSS w pliku Readdown GitHub tutaj: https://github.com/ElectricRCAircraftGuy/Arduino-STEM-Presentation
4. Nauczyłem się wszystkiego, co wiem o HTML i CSS, klikając na w3schools.com. Oto kilka konkretnych stron:
   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. Komentarze HTML i CSS: https://www.w3schools.com/css/css_comments.asp
5. Mój helikopter strzelający z ognia zrobiłem: https://www.electricrcaircraftguy.com/2016/05/battlebots-season-2-buzz-fire-drone.html

To naprawdę bardzo proste.

-> This is centered Text <-

Biorąc to pod uwagę, możesz zastosować to do składni img.

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