如何在單元中居中文本？ （不與文本對齊響應：中心）

Question

我有一個問題，我的CSS代碼，是不尊重我設置了align：

#addParameter{ 
    margin: 10px; 
    margin-top: 13px; 
    height: 20px; 
    width: 20px; 

    background-image: url(../img/add.svg); 
    background-repeat: no-repeat; 
    background-size: contain; 

    float: right; 

    text-indent:-9999px; 
    display: block; 
} 

.parameterType{ 
    text-align: center; 
} 

在這個屏幕截圖，你可以看到我的表

https://screencloud.net/v/oA9w

我嘗試使用邊距，填充但沒有任何工作，「parametros」列的文本必須始終居中。

編輯： 這是我的表中的HTML代碼

<table class="Table"> 
     <tr> 
      <td order="name" style="height: 50px;">Nombre</td> 
      <td order="area_id" >Área</td> 
      <td order="cost">Costo</td> 
      <td order="parameters">Parametros</td> 
     </tr> 

     <tr id="{{user.user_id}}"> 
      <td style="overflow:scroll">Mauricio Andrés González Gordillo</td> 
      <td style="overflow:scroll">Sanguíneo</td> 
      <td style="overflow:scroll">$300.00</td> 
      <td style="overflow:scroll"> 
       <a href="#" class="parameterType js-open-modal" data-modal-id="edit_parameter">aaa</a> 
       <a href="#" id="addParameter" class="js-open-modal" data-modal-id="add_parameter"></a> 
      </td> 
     </tr> 

    </table> 

感謝

Answer 1

你的問題不在於內容不會在小區的中間居中，問題是利潤率加入到旁邊的文本浮動框，它會導致框從其中心移動。上面的垂直對齊的答案工作正常，你可能也考慮到相對的位置添加到該小區，並給出一個絕對定位框，如圖所示的例子

.Table { 
 
    width: 300px; 
 
    border: 1px solid #000000; 
 

 
} 
 

 
    td { 
 
    padding: 0; 
 
    border: 1px solid #000000; 
 
    position: relative; 
 
    } 
 

 
.parameterType { 
 
    display: inline-block; 
 
    padding-right: 25px; 
 
} 
 

 

 
#addParameter{ 
 
    /* 
 
    margin: 10px; 
 
    margin-top: 13px; 
 
    */ 
 
    
 
    height: 20px; 
 
    width: 20px; 
 
    
 
    background-color: #ff0000; 
 
    background-image: url(../img/add.svg); 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    
 
    /* 
 
    float: right; 
 
    */ 
 
    
 
    text-indent:-9999px; 
 
    display: block; 
 
    
 
    /*add this*/ 
 
    position: absolute; 
 
    right: 5px; 
 
    top: 50%; 
 
    margin-top: -10px; /*half of the box height*/ 
 
} 
 

 
.parameterType{ 
 
    text-align: center; 
 
}

<table class="Table"> 
 
     <tr> 
 
      <td order="name" style="height: 50px;">Nombre</td> 
 
      <td order="area_id" >Área</td> 
 
      <td order="cost">Costo</td> 
 
      <td order="parameters">Parametros</td> 
 
     </tr> 
 

 
     <tr id="{{user.user_id}}"> 
 
      <td style="overflow:scroll">Mauricio Andrés González Gordillo</td> 
 
      <td style="overflow:scroll">Sanguíneo</td> 
 
      <td style="overflow:scroll">$300.00</td> 
 
      <td style="overflow:scroll"> 
 
       <a href="#" class="parameterType js-open-modal" data-modal-id="edit_parameter">text text text text</a> 
 
       <a href="#" id="addParameter" class="js-open-modal" data-modal-id="add_parameter"></a> 
 
      </td> 
 
     </tr> 
 

 
    </table>

Answer 2

如果我理解這一點正確，您想在表中的文本是水平和垂直居中。就像表格的行爲一樣嗎？

你可以通過你的表內分配

display:table; 

到div像<div class="table-container">

和

display:table-cell; 

任何div小號模擬與CSS這種行爲。

Here的還就如何中心的所有東西W3C一個很好的文章，你可以想中心

希望幫助！

Answer 3

vertical-align:middle; 
 

 
/* or */ 
 

 
line-height:(height of your table);

Answer 4

好吧，你有一些東西在CSS來解決：

#addParameter { 
    float: right; 
    position: relative; 
    right: 0; 
    top: -15px; 
} 

.parameterType { 
    text-align: center; 
    display:inline-block; 
    width:100%; 
    padding-top:15px; 
} 

並移動圖標HTML而不是在CSS有它的和背景圖像。這使你比起任何事物都更糟糕。在我的演示中，我使用的是字體真棒代替SVG圖像，但如果字體真棒不是您的一杯茶，只需替換<i class="fa fa-plus-square-o"></i>爲<img src="../img/add.svg"/>即可。你應該有相同的結果。

由於它看起來像你正在用AngularJS以編程方式做這個圖標，把它放在你的控制器或指令，你會有同樣的效果。

這裏是DEMO