2017-05-03 103 views
-2

enter image description here我有內部的兩個按鈕,我需要對齊的中心如何居中對齊​​中的按鈕?

<td align="center"> 
     <form action="ReplyFound" method="post" class="pull-left"> 
      <a class="btn btn-default "><em class="fa fa-pencil"></em></a> 
     </form> 

     <form action="DeleteMessage" method="post" class="pull-left"> 
     <a class="btn btn-danger "><em class="fa fa-trash"></em></a> 
     </form> 
    </td> 
+1

共享工作代碼或摘錄 –

回答

0

您可以使用下面的HTML這個

<td class="text-center"> 
    <form action="ReplyFound" method="post" class="btn-block"> 
     <a class="btn btn-default "><em class="fa fa-pencil"></em></a> 
    </form> 

    <form action="DeleteMessage" method="post" class="btn-block"> 
    <a class="btn btn-danger "><em class="fa fa-trash"></em></a> 
    </form> 
</td> 
0

失蹤關閉標籤</form>

如果您沒有定義寬度,當它的寬度將包裝內容。

<table style="width:100%"> 
 
    <tr> 
 
    <td align="center"> 
 
     <form action="ReplyFound" method="post" class="pull-left"> 
 
      <a class="btn btn-default ">Edit</a> 
 
</form> 
 
     <form action="DeleteMessage" method="post" class="pull-left"> 
 
     <a class="btn btn-danger ">Delete</a> 
 
     </form> 
 
     </td> 
 
    </tr> 
 
</table>

0

您可以使用此

.centerBtn{ 
 
display:inline-block; 
 
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<table style="width:100%"> 
 
<tr> 
 
<td align="center" > 
 
<div class="centerBtn"> 
 
     <form action="ReplyFound" method="post" class="pull-left"> 
 
      <a class="btn btn-default "><em class="fa fa-pencil"></em></a> 
 
     </form> 
 

 
     <form action="DeleteMessage" method="post" class="pull-left"> 
 
     <a class="btn btn-danger "><em class="fa fa-trash"></em></a> 
 
     </form> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
    </table>

0

嘗試:

display: block; 
margin: auto; 
0

試試這個:

.divCenter { 
 

 
    width: 100%; 
 
    max-width: 960px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 

 
} 
 

 
.pull-left { 
 

 
    display: inline-block; 
 
    margin: 5px; 
 
    background-color: #000; 
 
    color: #fff; 
 
\t 
 
}
<div class="divCenter"> 
 

 
    <td align="center"> 
 

 
    <form action="ReplyFound" method="post" class="pull-left"> 
 
      <a class="btn btn-default "><em class="fa fa-pencil">Button1</em></a> 
 
    </form> 
 

 
    <form action="DeleteMessage" method="post" class="pull-left"> 
 
      <a class="btn btn-danger "><em class="fa fa-trash">Button2</em></a> 
 
    </form> 
 

 
    </td> 
 

 
</div>