2015-09-09 3 views
0

I'am пытается центрировать это:Cant переместить содержимое в центр

[! [Введите описание изображения здесь] [1]] [1]

Вот HTML:

<section class="page-section parallax directions" id="location" style="padding-top:10%"> 
    <div class="container div-table"> 
    <div class="parallax-bg" data-stellar-background-ratio="0.5" data-stellar-vertical-offset="-150"></div> 
    <div class="parallax-overlay"></div> 
    <div class="parallax-inner text-center"> 
     <?php 
      session_start(); 
      if(isset($_SESSION['playername'])) 
      { 
      ?> 
     <div class="panel panel-warning" style="padding-left:10px;padding-right:10px"> 
      <h3 class='panel-header panel shadow text-center'><?php echo $_SESSION['playername'] ?> UCP</h3> 
      <div class="panel panel-body"> 
       <table> 
        <tr> 
         <td class="text-center"> 
          <h4><a href="signature.php?user=<?php echo $_SESSION['playername'] ?>">My Signature</a></h4> 
         </td> 
        </tr> 
        <tr> 
         <td class="text-center"> 
          <h4><a href="profile.php?user=<?php echo $_SESSION['playername'] ?>">My Profile</a></h4> 
         </td> 
        </tr> 
        <tr> 
         <td class="text-center"> 
          <h4><a href="account/change.php">Change My Password</a></h4> 
         </td> 
        </tr> 
        <tr> 
         <td class="text-center"> 
          <h4><a href="logout.php">Logout</a></h4> 
         </td> 
        </tr> 
       </table> 
      </div> 
     </div> 
     <?php 
      } 
      else 
      { 
       header("location:index.php"); 
      } 
      ?> 
    </div> 
</section> 

Я использую bootstrap btw, если это так.

EDIT: я полностью отредактировал код, который я не показал полностью.

ответ

0

использование margin:auto на вашем столе

.centerTable { 
 
    margin: auto; 
 
}
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="page-section parallax directions" id="location" style="padding-top:10%"> 
 
    <div class="container div-table"> 
 
     <div class="parallax-bg" data-stellar-background-ratio="0.5" data-stellar-vertical-offset="-150"></div> 
 
     <div class="parallax-overlay"></div> 
 
     <div class="parallax-inner text-center"> 
 

 
      <div class="panel panel-warning" style="padding-left:10px;padding-right:10px"> 
 
       <h3 class='panel-header panel shadow text-center'>UCP</h3> 
 
       <div class="panel panel-body"> 
 
        <table class="centerTable"> 
 
         <tr><td class="text-center"><h4><a href="">My Signature</a></h4></td></tr> 
 
         <tr><td class="text-center"><h4><a href="">My Profile</a></h4></td></tr> 
 
         <tr><td class="text-center"><h4><a href="">Change My Password</a></h4></td></tr> 
 
         <tr><td class="text-center"><h4><a href="">Logout</a></h4></td></tr> 
 
        </table> 
 
       </div> 
 
      </div> 
 

 

 
     </div> 
 
    </div> 
 
</section>

+0

это помогло мне, спасибо mate:] – Prabin

+0

Почему нельзя использовать класс «table» для начальной загрузки вместо класса .centerTable? –

1

try padding-left: auto; и padding-right: auto; вместо этого, 10px не много

С уважением

Рейчел

+0

, если вы хотите использовать%, используют 40% и позволит вашему ДИВ 20% ширина –

+0

https://jsfiddle.net/RachGal/99x50s2s/101/ –

0

Вы ищете что-то вроде этого? https://jsfiddle.net/99x50s2s/100/

Используйте класс текстового центра bootstrap, а также добавьте класс «table» в таблицу HTML.

<div class="panel panel-warning" style="padding-left:10px;padding-right:10px"> 
    <h3 class='panel-header panel shadow text-center'><?php echo $_SESSION['playername'] ?> UCP</h3> 
    <div class="panel panel-body"> 
     <table class="table"> 
      <tr><td class="text-center"><h4><a href="signature.php?user=<?php echo $_SESSION['playername'] ?>">My Signature</a></h4></td></tr> 
      <tr><td class="text-center"><h4><a href="profile.php?user=<?php echo $_SESSION['playername'] ?>">My Profile</a></h4></td></tr> 
      <tr><td class="text-center"><h4><a href="account/change.php">Change My Password</a></h4></td></tr> 
      <tr><td class="text-center"><h4><a href="logout.php">Logout</a></h4></td></tr> 
     </table> 
    </div> 
</div> 
+0

Это также помогло мне, спасибо:] – Prabin

1

Как насчет простой CSS ...

<div class="panel panel-body" style="width:150px;margin:auto;border:1px solid black;"> 

Я положил границу, чтобы вы могли видеть, что это лучше, чтобы отрегулировать ширину, как вам нужно. Вы также можете использовать процент в ширине.

1

создать идентификатор для вашего стола, что-то вроде mytable и стиль его следующим образом:

#mytable { 
    margin-left: auto; 
    margin-right: auto; 
} 

Вот jsfiddle.