Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How do I center my numerous paragraphs while using display: block

I’m building a portfolio website, and so I have a Heading on my About page and then some paragraphs.

Essentially, what I want to do is have the Heading and all Pargraphs centered in the middle of the page, and the text to wrap whenever there is less screen space, hence display: block, which will make it more responsive.

Previously, I had every single line in a new Paragraph Tag, making it nicer to read rather than it taking up the whole screen. This made it look odd on mobile, so I’m now using "display: block" (CSS) on all Paragraph Tags, which automatically wraps the text when there is less screen space.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

However, I am now unable to center these paragraphs, and when using absolutecenter, this makes the paragraphs overlap each other. How should I go about this?

Here is the simplified block of HTML for the Page (barring the Nav Bar).

<div class="container mt-5 pt-5">
        <div class="row">
            <div class="col-md-12" id="introToCam">
                <h1 id="centerHeading"> <b>About Me</b></h1>
                <p class="mb-5 pb-5 mt-3">
                    Text About Me
                </p>

                <br><br>    

                <p class="mb-5 pb-5 mt-3">
                    More Text About Me
                </p>

                <br><br>
            </div>
        </div>
    </div>

Here’s the CSS for the Paragraph Tags.

p{
    display: block;
    max-width: 60%;
}

>Solution :

According to provided code, to get required result to make paragraph tags centered in page, the CSS rule "margin: auto;" should be used as follows:

p {
  max-width: 60%;
  margin: auto;
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading