Question

我有3个不同宽度的积木。我希望每个块都水平居中，并且主文本下的文本对主文本的text-align:right为{{1}}。见图片

怎么做？

image = http://www.nahraj-obrazek.cz/pt-313937842321.png

Answer 1

您可以使用display: table;来达到理想的效果。的 SEE THE DEMO 通过应用display: table;，将div定义到您的文字所在的margin: auto;并将其居中。对于要右对齐的文本，请写入text-align: right;样式。就这样。

代码也少了。

AND DEMO FROM FIDDLE YOU PROVIDED

div { margin: 0 auto; display: table; } div p { text-align: right; }

Answer 2

试试这个：

.block
{
    display:inline-block;
    margin: auto;
    position: relative;
}

p.right
{
    position:absolute;
    right:0;
    bottom:0;
}

Answer 3

最简单的方法：

#center {
    text-align: center;
}
.someblock{
    display: table; 
    margin: 0 auto;
    background-color: yellow;
}
.someblock p {
    text-align: right;
}

直播示例：http://jsfiddle.net/6Mp34/

Answer 4

宽度未知

 *, *:before, *:after {
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
   box-sizing: border-box;
 }

.wrap {
     text-align: center;
}
.row {
    margin: 1em 0 0 0;
    display: inline-block;
    position: relative;
}
.row:first-child {
    margin: 0;
}
.author {
   text-align: right;
   display: block;
}

http://fiddle.jshell.net/9SqTe/7/
http://fiddle.jshell.net/9SqTe/7/show/

水平中心块，宽度未知

4 个答案: