当使用div和带有css的h1类时，如何在中心对齐文本的语法是什么？

Question

我在Wordpress Storefront主题中有以下内容

<div class="entry-content">
   <div id="pl-31" class="panel-layout">
      <h1 class="panel-grid panel-no-style" style="text-align: left;"> hello all</h1>
   </div>
</div>

而我正试图将我的h1中心，这包含在wordpress帖子中，但我对CSS中的语法感到困惑。我无法弄清楚实际使用哪个类。

style="text-align: left"包含在Element.style中。

那么，如何在这里正确地编写我的CSS语法？

我试过这个

.pl-31{

margin-left:auto;
margin-right:auto;
}

#pl-31 .panel-grid.panel-no-style{

text-align:center !important;

}

但你好所有只是向右移动了一点..

Answer 1

最直接的方法是在内联属性中将left更改为center，如评论中所述。

<div class="entry-content">
  <div id="pl-31" class="panel-layout">
    <h1 class="panel-grid panel-no-style" style="text-align: center;"> hello all</h1>
  </div>
</div>

或者完全删除属性并将text-align: center放在样式表中。

#pl-31 > h1 {
  text-align: center;
}

<div class="entry-content">
  <div id="pl-31" class="panel-layout">
    <h1 class="panel-grid panel-no-style"> hello all</h1>
  </div>
</div>

但是，如果你提示，你不能改变HTML，只能改变CSS，那么我们就不得不采取一些小技巧。

#pl-31 {
  text-align:center; /* center the whole pl-31 */
}

#pl-31 > * {
  text-align:initial; /* but not other elements inside */
}

#pl-31 > h1 {
  display:inline-block; /* make the h1 as wide as its contents */
}

<div class="entry-content">
   <div id="pl-31" class="panel-layout">
      <h1 class="panel-grid panel-no-style" style="text-align: left;"> hello all</h1>
   </div>
</div>

你去吧希望这可以帮助！

PS在评论中你还提到样式表中的text-align:center !important不起作用，但确实如此。所以不确定那里出了什么问题。