How do you center text in Gitlab 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.
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.
How do I center text in Gitlab after the transition to CommonMark?
gitlab markdown gitlab-ce
asked Nov 13 '18 at 4:08
Simon HyllSimon Hyll
9571922
add a comment |
After Gitlab switched its markdown engine to CommonMark it's no longer as easy to add things like custom styling to your markdown files.
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.
How do I center text in Gitlab after the transition to CommonMark?
gitlab markdown gitlab-ce
asked Nov 13 '18 at 4:08
Simon HyllSimon Hyll
9571922
add a comment |
After Gitlab switched its markdown engine to CommonMark it's no longer as easy to add things like custom styling to your markdown files.
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.
How do I center text in Gitlab after the transition to CommonMark?
gitlab markdown gitlab-ce
asked Nov 13 '18 at 4:08
Simon HyllSimon Hyll
9571922
After Gitlab switched its markdown engine to CommonMark it's no longer as easy to add things like custom styling to your markdown files.
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.
How do I center text in Gitlab after the transition to CommonMark?
gitlab markdown gitlab-ce
gitlab markdown gitlab-ce
asked Nov 13 '18 at 4:08
Simon HyllSimon Hyll
9571922
asked Nov 13 '18 at 4:08
Simon HyllSimon Hyll
9571922
asked Nov 13 '18 at 4:08
Simon HyllSimon Hyll
9571922
asked Nov 13 '18 at 4:08
Simon HyllSimon Hyll
9571922
asked Nov 13 '18 at 4:08
Simon HyllSimon Hyll
9571922
9571922
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Update
I checked out an old project of mine and noticed that it was already centered. It turns out that CommonMark allows you to set align="center" on <div> tags as well!
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>
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.
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.
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
Below you can see an example of how your README.md file could look on Gitlab using the above markdown.
answered Nov 13 '18 at 4:08
Simon HyllSimon Hyll
9571922
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53273660%2fhow-do-you-center-text-in-gitlab-markdown%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Update
I checked out an old project of mine and noticed that it was already centered. It turns out that CommonMark allows you to set align="center" on <div> tags as well!
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>
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.
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.
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
Below you can see an example of how your README.md file could look on Gitlab using the above markdown.
answered Nov 13 '18 at 4:08
Simon HyllSimon Hyll
9571922
add a comment |
Update
I checked out an old project of mine and noticed that it was already centered. It turns out that CommonMark allows you to set align="center" on <div> tags as well!
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>
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.
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.
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
Below you can see an example of how your README.md file could look on Gitlab using the above markdown.
answered Nov 13 '18 at 4:08
Simon HyllSimon Hyll
9571922
add a comment |
Update
I checked out an old project of mine and noticed that it was already centered. It turns out that CommonMark allows you to set align="center" on <div> tags as well!
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>
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.
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.
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
Below you can see an example of how your README.md file could look on Gitlab using the above markdown.
answered Nov 13 '18 at 4:08
Simon HyllSimon Hyll
9571922
Update
I checked out an old project of mine and noticed that it was already centered. It turns out that CommonMark allows you to set align="center" on <div> tags as well!
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>
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.
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.
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
Below you can see an example of how your README.md file could look on Gitlab using the above markdown.
answered Nov 13 '18 at 4:08
Simon HyllSimon Hyll
9571922
edited Nov 15 '18 at 14:30
answered Nov 13 '18 at 4:08
Simon HyllSimon Hyll
9571922
answered Nov 13 '18 at 4:08
Simon HyllSimon Hyll
9571922
answered Nov 13 '18 at 4:08
Simon HyllSimon Hyll
9571922
9571922
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53273660%2fhow-do-you-center-text-in-gitlab-markdown%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
