如何在网页中水平居中树莓派挂历的<iframe>时钟？

嘿，我来帮你搞定这个挂历时钟靠左的问题！这里有几种简单有效的方法可以让它水平居中，你可以根据自己的偏好选择：

方法1：用父容器的text-align:center #

因为iframe默认是行内块元素，给它套一个父div，设置text-align:center就能让它水平居中，代码如下：

<div style="text-align: center;">
  <iframe scrolling="no" frameborder="no" clocktype="html5" style="overflow:hidden;border:0;margin:0;padding:0;width:300px;height:75px;" src="https://www.clocklink.com/html5embed.php?clock=038&amp;timezone=EST&amp;color=red&amp;size=300&amp;Title=&amp;Message=&amp;Target=&amp;From=2019,1,1,0,0,0&amp;Color=red"></iframe>
</div>

方法2：直接给iframe设置margin:0 auto #

把iframe转换成块级元素（设置display:block），然后给它添加左右自动外边距，浏览器会自动分配左右的空间让它居中：

<iframe scrolling="no" frameborder="no" clocktype="html5" style="overflow:hidden;border:0;margin:0 auto;padding:0;width:300px;height:75px;display:block;" src="https://www.clocklink.com/html5embed.php?clock=038&amp;timezone=EST&amp;color=red&amp;size=300&amp;Title=&amp;Message=&amp;Target=&amp;From=2019,1,1,0,0,0&amp;Color=red"></iframe>

方法3：用Flexbox布局（推荐） #

这是更现代的布局方式，不仅能轻松实现水平居中，后续如果需要调整挂历的整体布局会更灵活：

<div style="display: flex; justify-content: center;">
  <iframe scrolling="no" frameborder="no" clocktype="html5" style="overflow:hidden;border:0;margin:0;padding:0;width:300px;height:75px;" src="https://www.clocklink.com/html5embed.php?clock=038&amp;timezone=EST&amp;color=red&amp;size=300&amp;Title=&amp;Message=&amp;Target=&amp;From=2019,1,1,0,0,0&amp;Color=red"></iframe>
</div>

这几种方法都能完美解决你的问题，选你觉得最顺手的就行～

内容的提问来源于stack exchange，提问作者Jeff Kleinsorgen