Question

当父母与中心对齐时，是否可以将儿童与左对齐？

我有元素列表。父块应与中心对齐，但子项与左侧对齐。

现在我也可以将儿童与中心对齐 - JSFIDDLE

.parent {
  text-align: center;
}
.child {
  width: 100px;
  height:100px;
  margin:10px;
  display:inline-block;
  background:#e0e0e0;
}

Answer 1

请尝试

@Test
public void arrayCopy1() {
    int[] a = {1, 2, 3};
    int[] b = a;

    System.out.println(a); //Point [I@64a294a6
    System.out.println(b); //Point [I@64a294a6

    printArrayValues(a);   //[1,2,3]
    printArrayValues(b);   //[1,2,3]
    a[0] = 10;
    printArrayValues(a);   //[10,2,3]
    printArrayValues(b);   //[10,2,3]
}

@Test
public void arrayCopy2() {
    int[] a = {1, 2, 3};
    int[] b = Arrays.copyOf(a, a.length);

    System.out.println(a); //Point [I@64a294a6
    System.out.println(b); //Point [I@7e0b37bc

    printArrayValues(a);   //[1,2,3]
    printArrayValues(b);   //[1,2,3]
    a[0] = 10;
    printArrayValues(a);   //[10,2,3]
    printArrayValues(b);   //[1,2,3]
}

private void printArrayValues(int[] arr) {
    System.out.print("[");
    for(int i = 0 ; i < arr.length ; i++) {
        System.out.print(arr[i]);
        if (i != arr.length-1)
            System.out.print(",");
    }
    System.out.println("]");
}

小提琴 - http://jsfiddle.net/Dgdhr/82/

Answer 2

试试这个，

.parent {
text-align: center;
position:absolute;
}
.child {
width: 100px;
height:100px;
margin:10px;
display:inline-block;
background:#e0e0e0;    
position:relative;
float:left;    
}

Answer 3

.parent必须是width: 100%吗？如果没有，您可以设置宽度margin: 0 auto;。见http://jsfiddle.net/h9xgx92u/

.parent {
  width: 80%;
  margin: 0 auto;
}
.child {
    width: 100px;
    height:100px;
    margin:10px;
    display:inline-block;
    background:#e0e0e0;
}

Answer 4

使用 HTML 这样的结构

<div class='superparent'>
  <div class='parent'>
    <div class='child'>
    </div>
  </div>
</div>

<强> CSS

.superparent{ text-align: center;}
.parent{display:inline-block; text-align:left}
.child{display:inline-block}

说明：

您需要父级位于屏幕的中心，因此 superparent具有center-text-align ，以及 parent是一个内联块，因此它不占用默认的完整块。
您需要让孩子左对齐，因此父级已经左对齐，还有有内联块的孩子< / strong>显示属性。

Answer 5

如果接受scss，则可以尝试以下操作：

html：

<div class='demo'>
    <ul class='demo__list'>
        <li class='demo__item'></li>
        <li class='demo__item'></li>
        <li class='demo__item'></li>
        <li class='demo__item'></li>
        <li class='demo__item'></li>
    </ul>
</div>

scss：

scss details

但是，如果所有子元素的总和小于外部子元素，则存在问题。

当父母与中心对齐时，将孩子左对齐

5 个答案: