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

user13587905 发表于常见问题

用户名

我正在创建一个网页，并希望在网页中嵌入GitHub Gist。我想将其对准中心。我正在使用flex。但是，即使页面中的所有其他内容都在自我对齐，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居中对齐。

优素福

将其包装script在一个容器元件中，在容器元件上设置所需width的值，然后在容器元件上设置margin-right和margin-left以auto将要点容器居中。

您可以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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。