无法确定如何在WordPress主题中居中放置div

时间:2018-02-02 作者:ricky

好人,

我是Wordpress/webdev的新手,试图帮助当地的一家小企业。店主希望主页上的文字以文本为中心,我一辈子都不知道该怎么做。网站为:www.norcalaviationservices。com公司

使用检查工具,我发现我可以使用这些类。14后和。条目内容。我不知道最好的类/ID是什么,但这两者似乎效果相同。我已经实施了许多策略,包括:

/* only indents text slightly on page */  
display: table;  
margin-right: auto;  
margin-left: auto;  
以及:

/* Intersects following div! */  
position: absolute;  
left: 50%;  
transform:translateX(-50%);  
以及:

/* Also intersects! */  
margin: auto;    
position: absolute;  
left:0;  
right: 0;  
top: 0;  
bottom: 0;  
与其他许多人一样,我发现这会产生重大问题,或者根本不起作用。我想问题的根源可能是我不明白是什么迫使文本向左移动——我花了很多时间研究CSS和代码检查器工具,我一辈子都搞不清楚是什么代码告诉文本或div显示它的显示方式。

如果有人能给我一个解决方案,或者给我指出正确的方向,让我自己找出一个,我将非常感激。

非常感谢Ricky

1 个回复
最合适的回答,由SO网友:swissspidy 整理而成

正如我在评论中提到的,http://howtocenterincss.com/ 是一个很好的资源,可以获得必要的CSS,使容器或段落在CSS中水平或垂直居中。

由于您提到文本应居中,wbesite将为您提供以下解决方案:

<div style="text-align:center;">Text Content</div>
如果要将容器居中,margin-right: auto; margin-left: auto; 也可以,但需要设置宽度并确保元素不浮动。

看看你的网站,你面临的主要问题似乎是你的主题使用了一个网格系统,内容只覆盖了该网格中12列中的8列:

Website screenshot

您可以做两件事:

创建子主题并重写HTML以使用类col-1-1 而不是col-8-12. 然后,使用text-align: center 仅水平居中文本。

保持col-8-12 类别和集合float: none; margin: 0 auto; 对于该元素,例如使用.home #main .col-8-12 选择器。您可以通过自定义程序或在子主题的CSS文件中执行此操作。

结束