css 对齐方式不适用于移动设备

Question

我有这个代码：

<!DOCTYPE html>
<!--Website made by William Stinson, 2016, Unsolicitedly.-->
<html>

<head>
  <style>
    .center {
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="center">
    <a href="http://www.gifford.org">
      <img src="http://www.myhopesanddreams.com/william/giffordlogo.png" draggable="false" alt="logo" />
    </a>
    <br>
    <img src="myhopesanddreams.com/Untitled 3.png" height="100" draggable="false">
    <iframe src="https://docs.google.com/a/gifford.org/forms/d/e/1FAIpQLSeAojv3USFoCWLpHJeIoSEiOydke0dKV3wmS-EWrr4-qbxryw/viewform?embedded=true" width="1300" height="1000" frameborder="3" marginheight="0" marginwidth="0">Loading...</iframe>
    <h1>Created for The Gifford School by William Stinson</h1>
  </div>
</body>

</html>

它在桌面设备上正确居中，但在移动设备上，它没有正确居中。我怎样才能解决这个问题？谢谢你的时间。

Answer 1

修改你的iframe宽度

.center {
  text-align: center;
}

<div class="center">
  <a href="http://www.gifford.org">
    <img src="http://www.myhopesanddreams.com/william/giffordlogo.png" draggable="false" alt="logo" />
  </a>
  <br><img src="myhopesanddreams.com/Untitled 3.png" height="100" draggable="false">
  <iframe src="https://docs.google.com/a/gifford.org/forms/d/e/1FAIpQLSeAojv3USFoCWLpHJeIoSEiOydke0dKV3wmS-EWrr4-qbxryw/viewform?embedded=true" width="98%" height="1000px" frameborder="3" marginheight="0" marginwidth="0">Loading...</iframe>
  <h1>Created for The Gifford School by William Stinson</h1>
</div>

这是一个DEMO

css 对齐方式不适用于移动设备

css alignment not working on mobile

html

css

centering