标签: text-align

Twitters Bootstrap Framework中是否有一组用于对齐文本的类？

例如,我有一些表格$,我想要与右边对齐...

<th class="align-right">Total</th>

和

<td class="align-right">$1,000,000.00</td>

我使用css样式text-align来对齐HTML中容器内的内容.这个工作正常,而内容是文本或浏览器是IE.但否则它不起作用.

另外顾名思义它基本上用于对齐文本.align属性已被弃用.

有没有其他方法来对齐html中的内容？

我正在尝试纠正CSS 2.1中常见的IE漏洞,需要一种方法来改变元素样式属性以添加自定义文本对齐样式.

目前在jQuery中你可以做类似的事情

$(this).width() or $(this).height() 

但我似乎无法找到一种改变文本的好方法 - 使用相同的方法.

该项已经有一个类,我在该类中设置text-align没有运气.在定义类之后,是否可以只向该元素添加text-align CSS属性？

我有类似的东西

$(this).css("text-align", "center"); 

在我的宽度调整之后,在我在firebug中查看之后,我看到只有"width"是样式上设置的唯一属性.有帮助吗？

编辑:

哇 - 对这个问题的回应很大!关于手头问题的更多细节:

我正在调整jqGrid A3.5 的js源来做一些自定义子网格工作,而我正在调整的实际JS如下所示(抱歉在上面的例子中使用"this",但是我想保持这个简单简洁)

var subGridJson = function(sjxml, sbid) {
    var tbl, trdiv, tddiv, result = "", i, cur, sgmap,
    dummy = document.createElement("table");
    tbl = document.createElement("tbody");
    $(dummy).attr({ cellSpacing: "0", cellPadding: "0", border: "0" });
    trdiv = document.createElement("tr");
    for (i = 0; i < ts.p.subGridModel[0].name.length; i++) {
        tddiv = document.createElement("th");
        tddiv.className = "ui-state-default ui-th-column";
        $(tddiv).html(ts.p.subGridModel[0].name[i]);
        $(tddiv).width(ts.p.subGridModel[0].width[i]);
        trdiv.appendChild(tddiv);
    }
    tbl.appendChild(trdiv);
}

我已经尝试了下面的两个(从提供的答案)没有运气.

$(tddiv).width(ts.p.subGridModel[0].width[i]).attr('style', …

还有一些其他问题已经解决了如何最好地应用text-align: justify以使内联块元素均匀分布...例如,我如何*真正*证明HTML + CSS中的水平菜单？

但是,"清除"内联块元素行的100%宽度元素由浏览器给出了自己的行.我无法弄清楚如何在不使用line-height: 0;父元素的情况下摆脱那个空的垂直空间.

有关问题的示例,请参阅此小提琴

对于我使用的解决方案line-height: 0;,请看这个小提琴

我正在使用的解决方案要求将新line-height元素应用于子元素,但任何先前设置line-height都将丢失.有人知道更好的解决方案吗？我想避免表格,以便元素可以在必要时包装,还有flexbox,因为浏览器支持还没有.我也想避免浮动,因为间隔开的元素数量是任意的.

我有一堆相同大小的块设置display:inline-block在div内部,text-align:center设置为对齐块.

|        _____   _____   _____   _____       |
|       |     | |     | |     | |     |      |
|       |  1  | |  2  | |  3  | |  4  |      |
|       |_____| |_____| |_____| |_____|      |
|        _____   _____   _____   _____       |
|       |     | |     | |     | |     |      |
|       |  5  | |  6  | |  7  | |  8  |      |
|       |_____| |_____| |_____| |_____|      |
|                                            |

这些块水平填充div,随着浏览器窗口缩小,一些块会断开到新行,从而创建更多行和更少列.我希望所有内容仍然保持居中,最后一行与左边齐平,如下所示: …

我不认为"为什么？" 这个问题很重要......但我需要做的是text-align:justify来自DIV的最后一行文本.通常情况下,div的最后一行(或第一行,如果没有其他行,这是当前情况)不合理,但是左对齐.我知道它可能没有任何意义,但我绝对需要最后一行才有道理!

我有以下html:

<div id="footer">
    <ul id="menu-utility-navigation" class="links clearfix">
        <li class="menu-685 menu-site_map first">Site Map
        </li>
        <li class="menu-686 menu-privacy_policy">Privacy Policy
        </li>
        <li class="menu-687 menu-terms___conditions">Terms &amp; Conditions
        </li>
        <li class="menu-688 menu-contact_us last">Contact Us
        </li>
    </ul>
</div>

使用以下CSS:

div#footer {
    font-size: 10px;
    margin: 0 auto;
    text-align: center;
    width: 700px;
}

我扔了font-size位只是为了看风格是否正常工作(Firebug报告它正在工作,但我想看到).这是工作.但是文本并没有集中在Firefox或Safari中的页脚中(还没有在IE中检查它).

我试着有没有保证金:0自动; 有和没有text-align:center; 没有这些东西的组合.

这是从firebug出来的:

div#footer {
    font-size: 10px;
    margin: 0 auto;
    text-align: center;
    width: 700px;
}

Inherited fromdiv#page
#skip-to-nav, #page {
    line-height: 1.5em;
}

Inherited frombody.html
body {
    color: #666666;
    font-family: verdana,arial,sans-serif;
}

救命？

我不想将CSS添加到我的div元素(例如<div style="text-align: center;">).我只想在按钮元素中添加CSS代码.

<div>
    <button>Button</button>
</div>

在这种情况下,如何将按钮水平居中？

我的HTML有问题.我在互联网上搜索过,但仍然没有真正的答案.

我有一个带有一些图像的网站,我希望它们位于中间.现在,在我的屏幕上,它们位于中间位置,但那是因为我把它们移到了一边.当我的朋友们看着它时,图像偏离中心.

这是网站 ; 如果你在13.5英寸的屏幕上,它看起来就在中间.

当我将浏览器的大小减小到XS大小时,使用Twitter Bootstrap.这是我的页脚.我有text-right处理剩余屏幕尺寸的属性,但在XS上,它在堆叠后仍然与右边对齐.

如何text-right在XS屏幕尺寸上没有这个？

<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-12 copyright">
                <p>&copy; 2014 LFDate. All rights reserved.</p>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12">
                <ul class="list-inline text-right">
                    <li><p><a href="#">Blog</a></p></li>
                    <li><p><a href="#">Press</a></p></li>
                    <li><p><a href="#">Jobs</a></p></li>
                    <li><p><a href="#">Contact</a></p></li>
                </ul>
            </div>
        </div>
    </div>
</footer>