如何在Gitlab markdown中居中显示文本? [英] How do you center text in Gitlab markdown?

问题描述

在Gitlab将其markdown引擎切换为CommonMark之后，将自定义样式等内容添加到markdown文件中不再那么容易.

After Gitlab switched its markdown engine to CommonMark it's no longer as easy to add things like custom styling to your markdown files.

我使用Gitlab已有一段时间了，而且最长的时间里，我一直喜欢使我的README.md文件看起来很好，并为项目提供居中的图标，标题和说明.当他们切换引擎时，我所有依靠这种样式的markdown文件看起来都非常糟糕.

I've used Gitlab for some time and for the longest time I've liked how nicely I could make my README.md file look, having a centered icon, title and description for my project. When they switched the engine all my markdown files that relied on having such stylings look really bad.

过渡到CommonMark后，如何在Gitlab中居中放置文本?

How do I center text in Gitlab after the transition to CommonMark?

推荐答案

更新

我检查了我的一个旧项目，发现它已经居中了.事实证明，CommonMark也允许您在<div>标签上设置align="center"！

因此，最简单的居中解决方案是当前(请注意在<div>开头的空行:

So, the simplest solution for centering is currently (note the empty line after the opening <div>:

<div align="center">

# This is gonna be centered!
</div>

原始

(据我所知)唯一支持居中的CommonMark html对象是将表格单元居中时.首先，您可能会考虑只制作一个表格，然后使用align="center"，但是该表格不会占用页面的整个宽度，因此您会在页面的左侧得到一个小桌子，但这并不能解决我们想要相对于页面而不是表格居中放置内容的问题.

Original

The only CommonMark html object that supports centering (as far as I know) is when you center a table cell. First you might've thought about just making a table and then using align="center", but the table won't take up the entire width of the page, so you'd get a small table on the left hand side of the page, which wouldn't solve our problem of wanting to center stuff relative to the page rather than the table.

要解决此问题，我们将表的宽度(不使用带有内联样式标签的CSS，因为在撰写本文时，CommonMark不支持此宽度)设置为一个较大的值，该值将占用页面总宽度以上的值.由于Gitlab markdown中表格的max-width: CSS属性是100%，这意味着通过设置一个非常高的width=""，我们实际上是通过仅使用允许的纯html width:设置为100% >属性.

To get around this we set the table width (not using CSS with an inline style tag since it's not supported in CommonMark at the time of writing) to a large value that will take up way more than the total width of the page. Since the max-width: CSS property of tables in Gitlab markdown is 100% it means that by setting a ridiculously high width="" we're essentially setting the table width: to 100% by using only the allowed pure html width="" property.

如果放置在例如Gitlab项目中的README.md将导致宽度为100％的表格具有居中的图像，标题和说明.最值得注意的是，我们在表的<td>元素上设置了width="9999".

The markdown below if placed in e.g. README.md in your Gitlab project will result in a 100% width table with a centered image, title and description. The most notable part is that we're setting width="9999" on the <td> element in the table.

<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

在下面，您可以看到一个使用上述减价在gitlab上显示README.md文件的示例.

Below you can see an example of how your README.md file could look on Gitlab using the above markdown.

这篇关于如何在Gitlab markdown中居中显示文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！