web-dev-qa-db-fra.com

Comment centrez-vous le texte dans la démarque Gitlab?

Après que Gitlab ait changé son moteur de démarque vers CommonMark, il n'est plus aussi facile d'ajouter des éléments comme un style personnalisé à vos fichiers de démarque.

J'utilise Gitlab depuis un certain temps et depuis longtemps, j'ai aimé la façon dont je pouvais faire en sorte que mon fichier README.md ressemble, ayant une icône centrée, un titre et une description pour mon projet. Quand ils ont changé de moteur, tous mes fichiers de démarque qui reposaient sur de tels styles étaient vraiment mauvais.

Comment centrer du texte dans Gitlab après la transition vers CommonMark?

7
Simon Hyll

Mettre à jour

J'ai vérifié un de mes anciens projets et j'ai remarqué qu'il était déjà centré. Il s'avère que CommonMark vous permet de définir align="center" sur <div> tags aussi!

Ainsi, la solution la plus simple pour le centrage est actuellement (notez la ligne vide après l'ouverture <div>:

<div align="center">

# This is gonna be centered!
</div>

Original

Le seul objet html CommonMark qui prend en charge le centrage (pour autant que je sache) est lorsque vous centrez une cellule de tableau. Vous avez peut-être d'abord pensé à créer un tableau, puis à utiliser align="center", mais le tableau ne prendra pas toute la largeur de la page, vous obtiendrez donc un petit tableau sur le côté gauche de la page, ce qui ne résoudrait pas notre problème de vouloir centrer les éléments par rapport au page plutôt que le tableau.

Pour contourner ce problème, nous avons défini la largeur du tableau (n'utilisant pas CSS avec une balise de style en ligne car il n'est pas pris en charge dans CommonMark au moment de la rédaction) sur une grande valeur qui prendra beaucoup plus que la largeur totale de la page. Depuis le max-width: La propriété CSS des tables dans le démarquage Gitlab est 100% cela signifie qu'en définissant un niveau ridiculement élevé width="" nous mettons essentiellement la table width: à 100% en utilisant uniquement le html pur autorisé width="" propriété.

La démarque ci-dessous si placée dans par ex. README.md dans votre projet Gitlab se traduira par un tableau de 100% de largeur avec une image centrée, un titre et une description. La partie la plus notable est que nous définissons width="9999" sur le <td> élément dans le tableau.

<table align="center"><tr><td align="center" width="9999">
<img src="/icon.png" align="center" width="150" alt="Project icon">

# MyProject

Description for my awesome project
</td></tr></table>

... More content

Ci-dessous, vous pouvez voir un exemple de l'apparence de votre fichier README.md sur Gitlab en utilisant la démarque ci-dessus. README.md file rendered on Gitlab

13
Simon Hyll