水平居中图像与Thymeleaf

huangapple go评论89阅读模式
英文:

Horizontally center an image with Thymeleaf

问题

我有这个CSS:

  1. /* 全局CSS样式 */
  2. body {
  3. background-color: #364f6b;
  4. margin: 0;
  5. padding: 0;
  6. }
  7. /* 样式化标志 */
  8. .logo {
  9. width: 400px;
  10. height: auto;
  11. justify-content: center; /* 水平居中内容 */
  12. }

和这个模板:

  1. <!DOCTYPE HTML>
  2. <html xmlns:th="http://www.thymeleaf.org" lang="en">
  3. <head>
  4. <!-- 菜单 -->
  5. <link id="themeLink" th:href="@{/css/mystic-planets.css}" rel="stylesheet" />
  6. <meta name="format-detection" content="telephone=no">
  7. </head>
  8. <body>
  9. <header>
  10. <img th:src="@{/images/137364472_padded_logo.png}" alt="mystic-planets" th:class="logo" />
  11. <!-- 其他头部内容放在这里 -->
  12. </header>
  13. </body>
  14. </html>

但是标志出现在页面的左上角。

英文:

I have this css:

  1. /* Global CSS styles */
  2. body {
  3. background-color: #364f6b;
  4. margin: 0;
  5. padding: 0;
  6. }
  7. /* Styling the logo */
  8. .logo {
  9. width: 400px;
  10. height: auto;
  11. justify-content: center; /* Horizontally center the content */
  12. }

and this template:

  1. &lt;!DOCTYPE HTML&gt;
  2. &lt;html xmlns:th=&quot;http://www.thymeleaf.org&quot; lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4. &lt;!-- Menu --&gt;
  5. &lt;link id=&quot;themeLink&quot; th:href=&quot;@{/css/mystic-planets.css}&quot; rel=&quot;stylesheet&quot; /&gt;
  6. &lt;meta name=&quot;format-detection&quot; content=&quot;telephone=no&quot;&gt;
  7. &lt;/head&gt;
  8. &lt;body&gt;
  9. &lt;header&gt;
  10. &lt;img th:src=&quot;@{/images/137364472_padded_logo.png}&quot; alt=&quot;mystic-planets&quot; th:class=&quot;logo&quot; /&gt;
  11. &lt;!-- Other header content goes here --&gt;
  12. &lt;/header&gt;
  13. &lt;/body&gt;
  14. &lt;/html&gt;

but the logo appears on the top-left side of the page

答案1

得分: 1

justify-content
justify-item

这些属性是CSS弹性布局的子部分。要使用这些属性,首先需要使用弹性布局。

  1. {
  2. display: flex;
  3. flex-direction: column;
  4. }

不要忘记使用flex-direction属性,可以选择row(行)或column(列)。

最后,你可以使用justify-content和justify-item属性。

看下面的例子,

  1. div {
  2. display: flex;
  3. justify-content: center;
  4. justify-items: center;
  5. }

希望对你有所帮助。

英文:
  1. justify-content
  2. justify-item

These properties are sub-parts of CSS flex layout. To use these properties you need to you flex layout first.

  1. {
  2. display: flex;
  3. flex-direction: column;
  4. }

Do not forget to use the flex-direction row or column.
Finally, you can use justify-content and justify-item properties.

Look at the following example,

  1. div {
  2. display: flex;
  3. justify-content: center;
  4. justify-items: center;
  5. }

Hope this is helpful for you.

huangapple
  • 本文由 发表于 2023年7月24日 20:19:26
  • 转载请务必保留本文链接:https://go.coder-hub.com/76754462.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定