web-dev-qa-db-ja.com

Gitlabマークダウンでテキストをどのように中央揃えしますか？

GitlabがマークダウンエンジンをCommonMarkに切り替えた後、カスタムスタイル設定などをマークダウンファイルに追加するのは簡単ではなくなりました。

私はしばらくの間Gitlabを使用しており、プロジェクトのアイコン、タイトル、説明を中央に配置して、README.mdファイルの見栄えをよくすることができました。彼らがエンジンを切り替えたとき、そのようなスタイル設定に依存していた私のすべてのマークダウンファイルは本当にひどく見えます。

CommonMarkへの移行後、Gitlabでテキストを中央揃えにするにはどうすればよいですか？

gitlabmarkdowngitlab-ce
7
Simon Hyll

更新

私の古いプロジェクトをチェックアウトしたところ、すでに中心に置かれていることに気付きました。 CommonMarkではalign="center"タグに<div>を設定することもできることがわかりました！

したがって、センタリングの最も簡単な解決策は現在です（<div>を開いた後の空の行に注意してください：

<div align="center">

# This is gonna be centered!
</div>

元の

（私の知る限り）センタリングをサポートする唯一のCommonMark htmlオブジェクトは、テーブルセルをセンタリングするときです。最初にテーブルを作成してalign="center"を使用することを考えたかもしれませんが、テーブルはページの幅全体を占めないため、ページの左側に小さなテーブルができます。テーブルではなくページに関連するものを中央に配置したいという問題を解決しないでください。

これを回避するために、テーブルの幅（作成時にCommonMarkでサポートされていないためインラインスタイルタグでCSSを使用しない）を、ページの合計幅よりもはるかに大きい大きな値に設定します。 Gitlabマークダウンのテーブルのmax-width: CSSプロパティは100%であるため、途方もなく高いwidth=""を設定することで、許可された純粋なhtml width:プロパティのみを使用して、テーブル100%をwidth=""に設定することになります。

に配置されている場合、下の値下げ。 GitlabプロジェクトのREADME.mdを使用すると、中央に画像、タイトル、説明がある100％幅のテーブルになります。最も注目すべき点は、テーブルのwidth="9999"要素に<td>を設定していることです。

<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

以下は、上記のマークダウンを使用してREADME.mdファイルがGitlabでどのように見えるかの例を示しています。 README.md file rendered on Gitlab

13
Simon Hyll