En utilisant Markdown, comment centrer une image et sa légende?
6 réponses
Vous avez besoin d'un conteneur bloc avec une hauteur définie, même valeur pour ligne-hauteur et image avec vertical-align: middle; Il devrait fonctionner.
Hello there !
<div id="container">
<img />
This is an image
</div>
Hi !
#container {
height:100px;
line-height:100px;
}
#container img {
vertical-align:middle;
max-height:100%;
}
j'ai pensé que je devrais juste utiliser HTML où je veux aligner horizontalement n'importe quoi.
donc mon code ressemblerait à ceci:
Hello there!
<center><img src="" ...></center>
<center>This is an image</center>
Hi!
Si vous utilisez kramdown, vous pouvez le faire
Hello there!
{:.center}
This is an image
Hi!
.center {
text-align: center;
}
Pe (et peut-être Jekyll) c'est assez simple.
-> This is centered Text <-
donc, en gardant cela à l'esprit, vous pouvez appliquer ceci à la syntaxe img.
-><-
cette syntaxe ne fonctionne pas pour les implémentations Markdown qui implémentent seulement ce qui est documenté sur Audacieuse Boule De Feu.
je pense que j'ai une solution simple qui fonctionnera étant donné que vous pouvez définir CSS. Il ne nécessite pas non plus d'extensions ou de HTML! D'abord votre démarque de l'image de code:
Notez le hachage d'url #center ajouté.
Maintenant, ajoutez cette règle dans CSS:
img[src*='#center'] {
display: block;
margin: auto;
}
vous devriez pouvoir utiliser un hash url comme celui-ci, presque comme définir un nom de classe.
pour voir cela en action, regardez mon JSFiddle en utilisant SnarkDown pour analyser MarkDown dans une textarea - https://jsfiddle.net/8q41zbfj/
Avec kramdown (utilisé par githubpages)
{: style="text-align:center"}
That is, while there is value in the items on
the right, we value the items on the left more.
Ou en utilisant la réponse de @(Steven Penny)
{:.mycenter}
That is, while there is value in the items on
the right, we value the items on the left more.
<style>
.mycenter {
text-align:center;
}
</style>