Question

我需要将文本移动到列中的特定空间，而我在CSS中无法使用text-align。我们正在构建一个应用程序，在选择数量时填充价格。请参阅下面的截图：

enter image description here

我需要物品总计下的14美元才能居中，但不知道怎么做。我试过漂浮：中心;同样。我认为真正的问题是我需要在一个不一定是正确的，左边的或中心的特定地方。有没有办法准确指定我想要填充该数字的位置？

这是HTML的一个片段 - 相关的类是粗体：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300' rel='stylesheet' type='text/css'>
<link rel="icon" 
      type="image/png" 
      href="img/feed.png">

    <title>Feed.me</title>
</head>
<body>

      <div class="container">
        <nav class="navbar navbar-default navbar-fixed-top">
             <h1>Feed.me</h1>
          <img src="img/hat.png" id ="image1"></img>
          <img src="img/ware.png" id="image2"></img>

      </nav>
        </div>

        </div>
      </div>

<div class="container">
    <div class="row">
        <div class="col-lg-12 col-xs-12 col-center">
        </div>
    </div>
    <div class="name">
        <div class="col-lg-12 col-xs-12 col-center">
        <center>Customer Name: <input class="customerName" type="text" placeholder="" /></center>
        <br />
        </div>
    </div>
    <!-- BEGIN RESTAURANT LIST -->
        <div class="row">
            <div class="col-lg-8 col-md-8 col-sm-12 col-center">
                <div class="list-group-item rest">Tacolicious</div>
                    <!-- <div class="row"> -->
                    <div class="col-md-12 col-center">
                            <table class="table table-hover menu taco">
                                <thead>
                                    <tr>
                                        <th class="col-lg-3 col-md-3">Item Name</th>
                                        <th class="col-lg-3 col-md-3">Price</th>
                                        <th class="col-lg-3 col-md-3">Quantity</th>
                                        <th class="col-lg-3 col-md-3">Item Total</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="menu-item-1">
                                        <td>Grilled Squid Veracruz</td>
                                        <td>$14</td>
                                        <td><input class="form" placeholder="0" data-price="14" type="number" name="quantity" value="0" min="0" max="99"></td>
                                        **<td class="price1 itemTotal"></td>**

在CSS中，我有.itemTotal：

.itemTotal{

    text-align: center;

}

提前致谢！

Answer 1

我会尝试绝对定位。

这里有两个如何使用它的例子：http://jsfiddle.net/Pzw8w/1/

小提琴中的第一张桌子在scooch上使用了一个新的<td>类，包裹了14美元，你希望舀到（hehe）。第二个表使用新的包装元素<span class="scooch">。如果可以的话，我建议使用第二个选项，因为它在表格中的任何一行（不仅仅是第一行）上更可靠。希望有所帮助！

Answer 2

我实际上刚刚使用text-indent属性解决了我的问题，该属性指定了我需要用来将.itemTotal放在正确位置的像素数。请参阅下面的示例：

.itemTotal{
    text-indent: 50px;
}

感谢大家的意见！

需要将正在填充的文本对齐到列中 - 不能使用text-align或float

2 个答案: