我是HTML / CSS的新手,如果这对您来说很基础,对不起,但是我想知道如何将一组并排的段落居中对齐。到目前为止,我的情况是:
<!DOCTYPE html>
<html>
<head>
<style>
footer h3 {
text-align: center;
}
footer p {
width: 33.333%;
float: left;
}
</style>
</head>
<body>
<footer>
<h3>CONTACTS AND ADDITIONAL INFO</h3>
<p>Contact:<br />[email protected]</p>
<p>Address:<br />Pine city, unit 2534</p>
<p>Copyright:<br />Nope</p>
</footer>
</body>
</html>
我尝试搜索解决方案并进行了尝试,但是之后我无法为该组段落提供通用的背景色。感谢您的宝贵时间!
我希望这是您想要的。
<!DOCTYPE html>
<html>
<head>
<style>
footer h3{
text-align: center;
}
footer p {
width: 33.333%;
margin-left: auto;
margin-right: auto;
background: lime;
}
</style>
</head>
<body>
<footer>
<h3>CONTACTS AND ADDITIONAL INFO</h3>
<p>Contact:<br />[email protected]</p>
<p>Address:<br />Pine city, unit 2534</p>
<p>Copyright:<br />Nope</p>
</footer>
</body>
</html>
肯定的朋友,让我帮您
之后添加
text-align: center;
如果您想为所有段落使用通用背景色,请加上
background-color: /*your background color I'll just use yellow in this case*/;
您的整个代码将看起来像这样
<!DOCTYPE html>
<html>
<head>
<style>
footer h3 {
text-align: center;
}
footer p {
width: 33.333%;
text-align: center;
float: left;
background-color: yellow;
}
</style>
</head>
<body>
<footer>
<h3>CONTACTS AND ADDITIONAL INFO</h3>
<p>Contact:<br />[email protected]</p>
<p>Address:<br />Pine city, unit 2534</p>
<p>Copyright:<br />Nope</p>
</footer>
</body>
</html>
[如果您想使段落文本居中,则只需在页脚CSS中添加text-align: center
。
[如果您要使段落在屏幕上居中,从而使段落大小相同,那么我认为没有一种简单的方法可以在不使用flexbox或CSS网格的情况下回答该问题。将所有段落设置为33.333%并使用自动页边距可能足够有效,但这不是最有效的方法。
使用CSS flexbox将使所有内容居中非常容易:
<html>
<head>
<style>
/* your container element */
footer {
text-align: center;
/* makes your parent container into a flex element */
display: flex;
/* the flex rule which will spread out your content evenly across its parent container */
justify-content: space-between;
}
footer p {
background: lightblue;
}
</style>
</head>
<body>
<footer>
<h3>CONTACTS AND ADDITIONAL INFO</h3>
<p>Contact:<br />[email protected]</p>
<p>Address:<br />Pine city, unit 2534</p>
<p>Copyright:<br />Nope</p>
</footer>
</body>
</html>
您可以在此网站here.上阅读更多的flexbox规则>
这是您要寻找的吗?