html - 如何以响应式设计方式使我的 div 居中？

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 设置宽度，但我也在做响应式设计，所以我无法真正设置宽度内部包装器。我该如何解决这个问题？谢谢。

Answer 1

关于元素的对齐方式:

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 size 以便使内部元素垂直居中； overflow 属性也必须设置为 hidden，否则 margin 会把你的 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% 并且它们的高度被设置为包裹它们的内容，所以如果你需要将你的 div 居中而不必设置它的宽度，你应该这样做:

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 居中，但您需要将其显示属性设置为 inline-block。检查this jsfiddle .