html - 当文本对齐在 CSS3 中不起作用时获取背景图像以居中对齐

Question

我在 WordPress 小部件中有一段代码，我试图将图像设为背景图像而不是常规图像

代码如下:

<p><div style="background-image: url('https://www.nationalcdp.org/wp-content/uploads
/2014/09/nationalcdp-600.png');text-align:center!important;background-repeat:no-  
repeat;width=600px;height:316px;"></div></p>

由于某些原因，图像确实按预期显示，但继续向左对齐——即使使用 !important 也是如此。

这是一个 Firebug 屏幕截图:

我是不是做错了什么？如果需要任何更多信息，请务必询问。

任何指导将不胜感激!

Answer 1

你混淆了属性。你需要像这样使用它:

<div style="background: url('https://www.nationalcdp.org/wp-content/uploads/2014/09/nationalcdp-600.png') no-repeat 50% 50%; width:600px; height:316px;"></div>

text-align 将使您的内容在元素内居中，而不是您的背景。看到 50% 50%(我将背景在垂直轴和水平轴的中间对齐，但您可以使用类似 top center, 0 50%, 20% 10%, 30px 100px 的东西或任何取决于您的需要)

你可以看到 complete specifications for background position here