[英]Can't figure out how to center a div to the page
I have two blocks of text with colored background. 我有两个带有彩色背景的文本块。 I want them to sit next to each other and then be horizontally centered on the page but I can't get them to center on the page.
我希望它们彼此相邻,然后在页面上水平居中,但是我无法让它们在页面上居中。 Also I have to use inline styling because I am just coding on wordpress for work.
另外,我还必须使用内联样式,因为我只是在wordpress上进行工作编码。 Help!
救命!
<div align="center">
<div style="background-color: #526f87; width: 60%; float: left; height: 160px; " >
<p style="font-size: 40px; color: #b9cbea; letter-spacing: 2px; line-height: 110%; padding-top: 20px; padding-right: 20px; text-align: right;">YOU'RE NEEDED AT THE TOP </p>
<p style="font-size: 40px; color: white; letter-spacing: 2px; line-height: 110%; padding-bottom: 20px; padding-right: 20px; text-align: right;" ><strong>MEET US THERE</strong>
</p>
</div>
<div style="background-color: #526f87; width: 20%; float: left; margin-left: 10px; height: 160px;">
<p style="color: #ffffff; font-size: 20px;" align="center">22 ICF CEUs <br /><span style="font-size: 12px;">(12.17 Core Competencies / 10.25 Resource Development)</span></p>
</div>
</div>
In general, you should know that there is a trick for centering divs on the page. 通常,您应该知道在页面上有一个使div居中的技巧。 If you want to center some content, you know what its
width
will be, right? 如果您想将某些内容居中,则知道其
width
是多少,对吗? So you can use: 因此,您可以使用:
width: /* something */;
margin-left: auto;
margin-right: auto;
So for your code snippet, I recommend using flex
if you're not targetting old browsers. 因此,对于您的代码段,如果您不针对旧的浏览器,建议使用
flex
。 I would do something like this: 我会做这样的事情:
<div style="display: flex; width: 80%; margin-left: auto; margin-right: auto;"> <div style="flex: 3">this is the larger div to the left</div> <div style="flex: 1">this is the one that should fall on the right</div> </div>
NOTE: My code keeps proportions with the ones in your code. 注意:我的代码与代码中的代码保持比例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.