0

I have divs which is displaying at the left side of the page i want to display them on center of the page I have also attached the screen shot of my divs:

     $array = [
    'Summary' => [
      'data' => '<div align="center"style="display: inline-block;width: 10%;" class="page_sum"><h1>Scan Summary:</h1></div>

                <div class="page_summary"><br/>
                    <div><h3 style="display: inline-block;width: 10%;" class="total_found">Total Files Found: '.$totalFind.'</h3></div>
                    <div><h3 style="display: inline-block;width: 10%;" class="total_dir">Total Directories: '.$totalIsDir.'</h3><br/></div>
                    <div><h3 style="display: inline-block;width: 10%;" class="planned_sync">Planned Sync Files: '.$totalShouldFind.'</h3></div>
                    <div><h3 style="display: inline-block;width: 10%;" class="actual_sync">Actual Synced: '.$totalResolved.'</h3><br/></div/>
                    <div><h3 style="display: inline-block;width: 10%;"class="missing_sync">Missing Synced Files: '.$forOfor.'</h3><div/>',
      'colspan' => 5, 'class' => array('foo', 'bar'),
    ],
  ];

and my css: 

 .page_sum{
 width: 100px;
 height: 50px;
  display: inline-block;
 }

 .page_sum { /* Using drop shadow, should appear identical to box shadow */
  -webkit-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
  background: #cccccc;
 }

I have just pasted one div css, instead of making div into center it displaying the text into center which is in div. How can I make my divs into center?

Please also find my screen.

enter image description here

CSS:

    .page_sum{
    width: 100px;
    height: 50px;
    display: inline-block;

    }

 .page_sum { /* Using drop shadow, should appear identical to box shadow */
  -webkit-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
     box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
     background: #cccccc;
   }
  .summary-center {
   margin: auto;
   width: 50%;
    }

and html:

    '<div class="summary-center" style="display: inline-block;width: 10%;" class="page_sum"><h1>Scan Summary:</h1></div>
halfer
  • 19,824
  • 17
  • 99
  • 186
syed1234
  • 761
  • 5
  • 12
  • 30
  • Does this answer your question? [How to horizontally center a
    ?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div)
     – rx2347 Mar 06 '20 at 08:06

3 Answers3

2

if you add the class .summary-center in div .page_sum and in div .page_summary it should work.

.summary-center {
  margin: auto;
  width: 50%;
}
Raswidr
  • 186
  • 6
1
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}
Gurmessa Lemma
  • 93
  • 1
  • 5
1

Try this:

<div class="page_summary summary-center">
  <h1>Scan Summary:</h1>
  <br/>
  <div>
    <h3 style="display: inline-block; width: 10%;" class="total_found page_sum">Total Files Found: XX</h3>
  </div>
  <div>
    <h3 style="display: inline-block; width: 10%;" class="total_dir page_sum">Total Directories: XX</h3>
    <br/>
  </div>
  <div>
    <h3 style="display: inline-block; width: 10%;" class="planned_sync page_sum">Planned Sync Files: XX</h3>
  </div>
  <div>
    <h3 style="display: inline-block; width: 10%;" class="actual_sync page_sum">Actual Synced: XX</h3>
    <br/>
  </div>
  <div>
    <h3 style="display: inline-block; width: 10%;"class="missing_sync page_sum">Missing Synced Files: XX</h3>
  </div>
</div>

<style>
  .page_sum {
    /* Using drop shadow, should appear identical to box shadow */
    -webkit-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
    background: #cccccc;
  } 

  .summary-center {
    margin: auto;
    width: 50%;
    text-align: center;
  }
</style>

This looks as follows:

center

Raswidr
  • 186
  • 6