I-Frame 嵌入不居中 - HTML答案

【问题标题】：I-Frame embed not centering - HTMLI-Frame 嵌入不居中 - HTML
【发布时间】：2022-11-15 21:40:23
【问题描述】：

目前，当我添加“Guilded”嵌入时，我的网页看起来像这样：

虽然这看起来不错，但我希望 iframe 居中，唯一的问题是我似乎无法居中。我不想在 CSS 中添加任何东西，因为这是一次性嵌入，我真的不想搞砸其他任何东西。这是嵌入代码：

<div className="auth-form-container">
            <img src={logo} alt="VaporCode Logo" />
            <h2 style={{ color: 'white' }}>Login</h2>
            <form className="login-form" onSubmit={handleSubmit}>
                <label htmlFor="email" style={{ color: 'white' }}>Email</>
                <input value={email} onChange={(e) => setEmail(e.target.v>
                <label htmlFor="password" style={{ color: 'white' }}>Pass>
                <input value={pass} onChange={(e) => setPass(e.target.val>
                <button type="submit">Log In</button>
            </form>
            <linkbutton className="link-btn" onClick={() => props.onFormS>
            <iframe src="https://www.guilded.gg/canvas_index.html?route=%>
        </div>

这是 css（请记住，我使用的是 React.Js，所以我没有在 HTML 中引用 css，但它仍然被引用。）：

App {
  text-align: center;
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  color: #000000;
  background-image: linear-gradient(79deg, #073a8c, #281369 48%, #135b69);
}

.auth-form-container, .login-form, .register-form {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 600px)  {
  .auth-form-container {
    position:absolute;   
    justify-content: center;
    padding: 1rem;
    border: solid #222222;
    background-color: #000000;
    fill: solid #000000;
    border-radius: 10px;
    margin:30rem;
  }
}

label {
  text-align: left;
  padding: 0.25rem 0;
}
input {
  margin: 0.5rem 0;
  padding: 1rem;
  border: none;
  border-radius: 10px;
}


button {
  border: none;
  background-image: linear-gradient(79deg, #ff893f, #fa8d90 48%, #e769d1);
  padding: 20px;
  border-radius: 10px;
  cursor: pointer;
  color: #ffffff;
  font-weight : bold;
  transition-duration: 2s;
}


linkbutton {
  border: none;
  padding: 20px;
  border-radius: 10px;
  cursor: pointer;
  color: #ffffff;
}

.link-btn {
  background: none;
  color: white;
  text-decoration: underline;
}
img {
    margin: 0 auto;
    max-width: 10%;
    height: 10%;
}

最后，我希望它以容器为中心。而且我不确定如何...

我试图打开绝对位置，然后将其调整为居中。我也在另一篇文章中尝试过推荐，但都无济于事。我是 Html 新手，希望得到一些帮助。

-谢谢：）

【问题讨论】：

请发布您的 html 和 CSS，以便在堆栈溢出时重现此问题。谢谢

标签： html css embed

【解决方案1】：

如果目标是在不触及 CSS 文件的情况下使其居中，可能是这样的：

<div style="display: flex; justify-content: center; width: 100%">
  <iframe
    src="https://www.guilded.gg/canvas_index.html?route=%2Fcanvas%2Fembed%2Fbadge%2F4R5YgKWR"
    width="294"
    height="48"
    frameborder="0"
  ></iframe>
</div>

但需要更多现有代码来测试此解决方案是否有效。

【讨论】：