Question

我在父div中有2个子div。我需要child1始终居中于父级，而child2位于child1之下（与child1的左侧对齐）。

Child1包含可变长度的文本。怎么办呢？

#parent {
  text-align: center;
}

<div id="parent">
  <div id="child1">Variable length text here</div>
  <div id="child2">Some text here</div>
</div>

当前的child2职位

这就是我需要的

Answer 1

由于你的child1文本长度是可变的，你需要使用jQuery来执行此操作。这是我用潜在解决方案制作的jsfiddle。基本上你是在计算你的child1的宽度，然后使用它来设置以child1为中心的填充，并将所有p个元素放在同一个指南上。

<html>
<div id="parent">
<div id="child1" class="child"><p id="keyWidth">Variable text. 
</p></div>
<div id="child2" class="child"><p>
Variable text padding-left is: 
</p></div>
<div id="child3" class="child"><p>
Some much much much longer text here this text is so long
</p></div>
</div>
</html>

<style>
#parent {
display: block;
width: 50%;
margin: 0 auto;
padding: 2%;
background-color: yellow;
}

.child{
margin: 2%;
padding: 2%;
background-color: cyan;
} 

p{
width: auto; 
display: inline-block;
}
</style>

<script>
var keyWidth = $('#keyWidth').width();
var keyDivWidth = $('.child').width(); 
var keyPadding = keyDivWidth-keyWidth;

$('#child2 p').append(keyPadding);
$('p').css('padding-left', keyPadding/2 + "px");
</script>

Answer 2

尝试display:table和display:table-caption方法：

.parent {
  display: table;
  margin: auto;
}

.child2 {
  display: table-caption;
  caption-side: bottom;
  background: silver;
}

<div class="parent">
  <div class="child1">Variable length text here</div>
  <div class="child2">Some text here</div>
</div>

<br>

<div class="parent">
  <div class="child1">Variable length text</div>
  <div class="child2">Some text Some text Some text</div>
</div>

Answer 3

这是一个简单的灵活解决方案。我们的想法是使用伪元素来获取左边的剩余空间以强制两个文本的宽度相同，然后将左对齐放在第二个。

然后诀窍是使用position:absolute使第二个孩子的内容脱离流程，因此只有第一个内容将决定所需的宽度。

＆＃13;

#parent {
  border: 1px solid;
  text-align: center;
  display:flex;
}
#parent:before,#parent:after {
  content:"";
  flex:1;
}

.child:nth-child(2) {
  position:relative;
}
.child:nth-child(2)::after {
  content:"A"; /* A hidden character to create the necessary space for one line */
  visibility:hidden;
}
.child:nth-child(2) > div {
  text-align:left;
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  white-space:nowrap;
}

＆＃13;

<div id="parent">
  <div class="content">
    <div class="child">
      <div>Variable length text here</div>
    </div>
    <div class="child">
      <div>Some text here</div>
    </div>
  </div>
</div>
<div id="parent">
  <div class="content">
    <div class="child">
      <div>Variable length text here</div>
    </div>
    <div class="child">
      <div>Some text here dsdf sdf sdf sdf</div>
    </div>
  </div>
</div>

＆＃13;

两个子节点一个匹配另一个宽度可变的子节点

3 个答案: