how to make paragraph center

Question

I am trying to make paragraph center

I am using card

I am trying margin-left and margin-right and padding-left and padding-right but not work properly

I am trying to make paragraph one line below the service

<div class="card" style="width: 70rem;margin-top:120px;margin-left:120px;">
    <div class="card-img-overlay d-flex flex-column">

        <div class="row">
            <img class="card-img-top" src="~/Graphics/homeiconservicepage.svg" style="width:25px;height:25px;" />
            <a href="@ViewBag.link">@ViewBag.text</a>
        </div>
        
        <div class="justify-content-center d-flex">
            <span> <text font-size:50px;"> @ViewBag.text </text></span>

        </div>

        <div class="justify-content-center d-flex" >
            <p>
                We enable organizations from startups to large enterprises
                to make their work environment more efficient.
            </p>
        </div>
    </div>
    <img class="card-img-top" src="https://images.unsplash.com/photo-1552519507-da3b142c6e3d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" style="width:1200px;height:400px;" alt="Card image">
</div>

Current Output

@OMiShah when I try your suggestion then not work see this image https://i.stack.imgur.com/qMH4F.png can you help more — nisku rem dir, Oct 15 '20 at 05:26
Please update your code so that we can get the same results. Makes it easier for us to help :D — , Oct 15 '20 at 05:30
@AudunHilden this is my updated code I am trying to another person suggestion but not work — nisku rem dir, Oct 15 '20 at 05:31
Update your code so that we can get the same results as the picture you posted above — , Oct 15 '20 at 05:37

MaxiGui · Accepted Answer · 2020-10-15T11:46:38.270

1

I am on phone so I cannot use the snippet (Codepen: https://codepen.io/Maxigui/pen/NWrxwRg)

First thing would be to set flex-column in your card-img-overlay.

On last p I just set: class="mx-auto"

And if you want to set center, instead of align-items-center repoace that by justify-content-center (I did not do that)

I suggest you the below code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="card" style="width: 70rem;margin-top:120px;margin-left:120px;">
    <div class="card-img-overlay d-flex flex-column">

        <div class="row">
            <img class="card-img-top" src="~/Graphics/homeiconservicepage.svg" style="width:25px;height:25px;" />
            <a href="@ViewBag.link">@ViewBag.text</a>
        </div>
        
        <div class="justify-content-center d-flex flex-column m-auto">
            <span class="mx-auto"> <text style="font-size:50px;"> @ViewBag.text </text></span>
            <p>
                We enable organizations from startups to large enterprises
                to make their work environment more efficient.
            </p>
        </div>
    </div>
    <img class="card-img-top" src="https://images.unsplash.com/photo-1552519507-da3b142c6e3d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" style="width:1200px;height:400px;" alt="Card image">
</div>

edited Oct 15 '20 at 11:46

answered Oct 15 '20 at 06:12

MaxiGui

6,190
4
16
33

I am trying to make more center service text and below paregraph see this image https://i.stack.imgur.com/92PAY.png and https://i.stack.imgur.com/MqziJ.png can you more help – nisku rem dir Oct 15 '20 at 06:28
You mean verticaly center? – MaxiGui Oct 15 '20 at 06:31
see this image what I am trying to say https://i.stack.imgur.com/bl5VK.png – nisku rem dir Oct 15 '20 at 06:33
service text and paregraph text make it center means card top space and card bottom space is same and then service text and paregraph text make it center – nisku rem dir Oct 15 '20 at 06:36
Ok then set your « service text and below paregraph » to the same container div, add `flex-column` to the container. Please update the code in your question like this I could use it. – MaxiGui Oct 15 '20 at 06:36
I hope you understood what I am trying to say – nisku rem dir Oct 15 '20 at 06:36
I did for sure, you want center horizontal and Vertical. Did you make these changes? Apply as well `m-auto` on your container – MaxiGui Oct 15 '20 at 06:41
please see I update my question can you help more? – nisku rem dir Oct 15 '20 at 06:44
see my service text and paregraph is not center I want to center it means card top and card bottom space is same – nisku rem dir Oct 15 '20 at 06:45
Try updated code and you can check codepen too – MaxiGui Oct 15 '20 at 06:54

score 0 · Answer 2 · answered Oct 15 '20 at 05:57

0

Use this:

  <p text style="color:black;margin-top:180px;padding-right:150px;padding-left:150px;text-align: center">
            We enable organizations from startups to large enterprises
            to make their work environment more efficient.
  </p>

Change the value of padding-right and padding-left according to your preference.

answered Oct 15 '20 at 05:57

Ameya Uppina

131
1
3
13

thanks for your suggestion but not work https://i.stack.imgur.com/AhNPO.png – nisku rem dir Oct 15 '20 at 06:02

score 0 · Answer 3 · answered Oct 15 '20 at 06:19

0

Set style="text-align:center". It works for me.

<p style="text-align:center"> We enable organizations from startups to large enterprises to make their work environment more efficient.</p>

answered Oct 15 '20 at 06:19

Chamodi Sandeepani

1

score 0 · Answer 4 · answered Oct 15 '20 at 06:48

@niskuremdir, How about this does this work?

<span style="color:black;margin-top:180px;text-align:center">
<p>
We enable organizations from startups to large enterprises to make their work environment more efficient.
</p>
</span>

Try doing this with and without the <p> </p> and also try with both <div> </div> and <span> </span> If that works, then you can go ahead and try to add the left/right padding:)

score 0 · Answer 5 · answered Oct 15 '20 at 07:01

You've to give width and height to parent container of text.

<div class="card" style="width: 70rem;margin-top:120px;margin-left:120px;">
  <div class="card-img-overlay d-flex flex-column">
    <div class="row">
      <img class="card-img-top" src="~/Graphics/homeiconservicepage.svg" style="width:25px;height:25px;" />
      <a href="@ViewBag.link">@ViewBag.text</a>
    </div>
    <div class="d-flex flex-column justify-content-center align-items-center w-100 h-100">
       <div>
         <span> <text font-size:50px;"> @ViewBag.text </text></span>
       </div>
       <div>
          <p>
            We enable organizations from startups to large enterprises
                            to make their work environment more efficient.
          </p>
       </div>
    </div>
  </div>
 <img class="card-img-top" src="https://images.unsplash.com/photo-1552519507-da3b142c6e3d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" style="width:1200px;height:400px;" alt="Card image">
</div>

how to make paragraph center

5 Answers5