求助：针对embed/iframe等元素的text-align: center !important; 不生效？

嘿，我来帮你搞定这个text-align: center !important不生效的问题！先搞清楚核心原因，再给你可行的解决办法～

为什么这个样式没生效？ #

首先得明确一个关键知识点：text-align属性是用来控制元素内部的行内/内联块内容的对齐方式，而不是让元素自身在父容器中居中。你现在把这个属性直接加在embed、iframe、object、video这些元素上，相当于让这些元素内部的内容（比如iframe里的页面内容、video的控件）居中，但如果你的实际需求是让这些媒体元素自己在父容器里水平居中，那这个属性自然达不到你想要的效果。

另外还有两种可能的次要原因：

• 这些元素的display属性被其他样式修改，导致text-align无法作用于内部内容；
• 即便加了!important，如果作用的对象本身就不对，优先级再高也没用。

解决方法 #

根据你大概率想要的「让媒体元素在父容器中水平居中」的需求，给你两种靠谱的方案：

方案1：给父容器设置text-align: center #

因为embed、iframe这类元素默认是inline-block类型，父容器的text-align: center会让它们自动在父容器中水平居中。你可以保留原有样式，只给父容器加样式：

/* 替换成你的媒体元素实际的父容器选择器，比如body、.content-wrap等 */
.media-parent {
  text-align: center;
}

/* 你的原有样式，去掉无效的text-align */
embed, iframe, object, video {
  max-width: 98%;
  min-width: 97%;
  box-shadow: 0 0 20px #fff;
  border: 1px solid #ffffff;
}

方案2：给媒体元素自身设置margin: 0 auto #

把这些元素设置为块级元素，然后利用margin: 0 auto实现水平居中（块级元素的左右margin设为auto时，会自动平分剩余空间）：

embed, iframe, object, video {
  max-width: 98%;
  min-width: 97%;
  box-shadow: 0 0 20px #fff;
  border: 1px solid #ffffff;
  /* 添加这两行样式 */
  display: block;
  margin: 0 auto;
}

如果你确实想让元素内部内容居中 #

如果你真的是要让这些元素内部的内容（比如iframe加载的页面）居中，那外部的text-align是无法影响iframe内部页面的——因为iframe是独立的文档环境。这种情况下你需要修改iframe内部页面的CSS，或者给object、video内部的内容单独设置样式。

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