I hope this is what you are looking for.
<!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>
Is this what you’re looking for?
<!DOCTYPE html>
<html>
<head>
<style>
footer h3 {
text-align: center;
}
footer p {
/* width: 33.333%; */
/* float: left; */
}
.flex-container {
display: flex;
justify-content: space-evenly;
}
</style>
</head>
<body>
<footer>
<h3>CONTACTS AND ADDITIONAL INFO</h3>
<div class="flex-container">
<p>Contact:<br />[email protected]</p>
<p>Address:<br />Pine city, unit 2534</p>
<p>Copyright:<br />Nope</p>
</div>
</footer>
</body>
</html>
Sure buddy let me help you
After that add
text-align: center;
Plus if you want a common background color for all paragraphs use
background-color: /*your background color I'll just use yellow in this case*/;
Your whole code would then look something like this
<!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>
If you mean that you want the paragraph text to be centered, you would just have to add text-align: center
to your footer css.
If you mean for the paragraphs to be centered across the screen, thus making the paragraphs the same size, I don’t think there’s an easy way to answer that without using flexbox or CSS grid. Setting all of your paragraphs to 33.333% and using auto margins might be effective enough, but it’s not the most efficient way.
Using CSS flexbox would make centering everything very easy:
<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>
You can read more flexbox rules on this website here.
I’m new to HTML/CSS so sorry if this is pretty basic to you but I was wondering how I could center align a group of side by side paragraphs. What I have so far is this:
<!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>
I tried searching up solutions to this and tried them but I couldn’t give the group of paragraphs a common background-color after. Thanks for your time!
No, this is not what I was looking for as the text is center-aligned. What I’m trying to achieve is left-aligning each paragraph but centering all the paragraphs.
@piny88 Please see the updated code snippet for the change. I hope I understand you well.
Yes, that’s what I was looking for. Thanks!
Great. I learned flexbox a few weeks ago. This was my go-to: