时间戳

首页 > 解决方案 > 如何使用 CSS 在 HTML 页面中对齐 GitHub Gist？

html - 如何使用 CSS 在 HTML 页面中对齐 GitHub Gist？

问题描述

我正在创建一个网页，并希望在网页中嵌入一个 GitHub Gist。我想把它对齐在中心。我正在使用弹性。但是，即使页面中的其他所有内容都在自我对齐，GitHub Gist 对象也不会自我对齐。

最小可重现代码：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>Sample</title>
    <link href="css/StyleSheet2.css" rel="stylesheet" />
</head>


<body class="Top-Head">
    <h1 class="Topper">This line gets centered</h1>
    <script src="https://gist.github.com/anirbansaha96/6a515384c62191b367b4489ea538481e.js"></script></body>

</html>

和 CSS 文件：

body {
    margin: 0;
}

.Top-Head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: baseline;
}
.end-github-gist {
    align-self: center;
}

.Topper {
    align-self:center;
}

样本：

请在此处找到示例。

预期输出：每个项目都居中对齐，主要是 GitHub Gist 居中对齐。

标签： htmlcss

解决方案

将 包装script在容器元素中，在容器元素上设置所需width的内容，然后在容器元素上设置margin-right和margin-lefttoauto以使容器居中。

您可以调整width容器元素的 ，在以下代码片段中，我已将其设置为70%.

body {
  text-align: center;
}

.gistContainer {
  width: 70%;
  margin: 0 auto;
}
<h1 class="Topper">This line gets centered</h1>
<div class="gistContainer">
  <script src="https://gist.github.com/anirbansaha96/6a515384c62191b367b4489ea538481e.js"></script>
</div>

推荐阅读