Question

我的CSS代码有问题，不尊重我设置的对齐方式：

#ifndef CHESSBOARD_H
#define CHESSBOARD_H


/*
ChessBoard object stores a 2D representation of 32 ChessPieces.
Checks for win or tie after each move
*/

#include "Player.h"
#include "ChessPiece.h"

//Board size
const int SIZE = 64;

class ChessBoard {
public:

在此屏幕截图中，您可以看到我的表格

https://screencloud.net/v/oA9w

我尝试过边距，填充，但没有任何作用，“parametros”列的文本必须始终居中。

编辑：这是我的表的HTML代码

    #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;
}

由于

Answer 1

如果我理解正确，你希望表格中的文字水平和垂直居中。就像表的行为一样吧？

您可以通过分配

来使用CSS模拟此行为

display:table;

到div <{1}}，如<div class="table-container">

和

display:table-cell;

到你桌子内的任何div。

Here还有一篇关于如何集中所有你想要集中的内容的关于W3C的好文章

希望有所帮助！

Answer 2

＆＃13;

vertical-align:middle;

/* or */

line-height:(height of your table);

＆＃13;

Answer 3

好吧，你有一些东西要在CSS中修复：

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

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

将图标移动到HTML，而不是将其放在CSS和背景图像中。这比搞乱你更重要。在我的DEMO中，我使用的是字体真棒而不是SVG图像，但如果字体真棒不是你的一杯茶，只需将<i class="fa fa-plus-square-o"></i>替换为<img src="../img/add.svg"/>即可。你应该得到相同的结果。

由于看起来您正在使用AngularJS以编程方式执行此图标，请将其放在您的控制器或指令中，您将获得相同的效果。

以下是DEMO

Answer 4

问题不在于内容不在单元格的中间，问题是文本旁边的浮动框中添加了边距，导致框从其中心移动。上面的垂直对齐答案工作正常，您也可以考虑添加相对于单元格的位置，并给出框的绝对定位，如示例所示

.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>

如何在单元格中居文本？（没有回复text-align：center）

4 个答案:

如何在单元格中居文本？ （没有回复text-align：center）

4 个答案:

如何在单元格中居文本？（没有回复text-align：center）