Question

我正在尝试在我的元素中做一个文本对齐中心，我希望该元素内的所有内容都有文本对齐。

这是我的HTML

<div id='wrapper'>
  <div id='inside-wrapper'>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
  </div>
</div>

#inside-wrapper{
  text-align:center;
}

#inside-wrapper div{
  display:inline-block
  text-align:left;
}

以上代码不起作用，我需要将我的元素放在这个中心

 ----------------------
|
|    test test test    //inside-wrapper is center but elements inside inside-wrapper is  
|    test              //text-align left            
|

我可以使用margin:0 auto和inside-wrapper的设置宽度，但我也在做响应式设计，因此我无法在inside-wrapper中设置宽度。我该如何解决这个问题？感谢。

Answer 1

关于元素的对齐：

text-align属性仅适用于文字或inline-block元素（例如span或a），而不适用block元素（例如div或p）。

我认为这就是你要找的东西：

<强> HTML ：

<div id="Outer">
    <div id="Inner">
        <div>test</div>
        <div>test</div>
        <div>test</div>
        <div>test</div>
        <div>test</div>
    </div>
</div>

<强> CSS ：

#Outer {
    width: 150px;
    height: 150px;
    background: yellow;
    overflow: hidden;
}

#Inner {
    width: 100px;
    height: 100px;
    background: red;
    margin-top: 25px;
    margin-left: 25px;
}

#Inner div {
    display: inline-block;
}

检查jsfiddle here。

您可能会注意到，您可以使用auto属性水平对齐元素但您需要指定特定的margin-top大小才能使内部居中元素垂直;溢出属性也必须设置为hidden，否则边距将推动你的div。

<强>更新：

如果你不需要垂直居中你的内部div，你可以坚持这个（内部div的宽度也是相对的），check this jsfiddle：

<强> CSS ：

#Outer {
    width: 150px;
    height: 150px;
    background: yellow;
    overflow: hidden;
}

#Inner {
    width: 75%;
    height: 75%;
    background: red;
    margin-left: auto;
    margin-right: auto;
}

#Inner div {
    display: inline-block;
}

默认情况下，所有div的宽度都设置为100%以及它们的高度以包装其内容，因此如果您需要居中，而不需要设置其宽度，则应该执行某些操作像这样：

<强> CSS ：

#Outer {
    width: 150px;
    height: 150px;
    background: yellow;
    text-align: center;
}

#Inner {
    display: inline-block;
    background: red;
    margin-left: auto;
    margin-right: auto;
}

#Inner div {
    display: inline-block;
}

在这种情况下，您可以使用text-align属性将内部div居中，但是您需要将其display属性设置为inline-block。检查this jsfiddle。

Answer 2

如果您只是在display: inline-block之后修复缺少的分号

，那么您的代码似乎正常工作

#inside-wrapper div{
  display:inline-block; // Missing semicolon here.
  text-align:left;
}

对于最后一个居中的孩子，你可以很容易地使用伪选择器:last-child来漂浮div。

Your Working Fiddle

如何以响应式设计方式集中我的div？

2 个答案: