Question

我有两个div，一个在另一个里面。我试图将内部和底部的div对齐并垂直对齐，但由于某种原因它根本不起作用。请看一下我的代码：

#outer {
border: 1px solid black;
height: 500px;
}

#inner {
border: 1px solid black;
display: inline;
vertical-align: bottom;
margin: 0 auto;
}

<div id = 'outer'> 
<div id = 'inner'> inner </div>
</div>

Answer 1

您可以使用text-align:center将内联div居中，然后在内部div上使用绝对或固定定位，并在外部div上使用相对位置将其固定到底部：

＆＃13;

    #outer {
border: 1px solid black;
height: 500px;
text-align:center;
position:relative;

}

#inner {
border: 1px solid black;
display: inline;
margin: 0 auto;
position:absolute;
bottom:0
}

＆＃13;

<div id = 'outer'> 
<div id = 'inner'> inner </div>
</div>

＆＃13;

修改

您可以将内容包装在另一个元素中，并在内联或内联块中使用margin：0 auto：

＆＃13;

#outer {
border: 1px solid black;
height: 500px;
text-align:center;
position:relative;

}

#inner {
width:100%;
position:absolute;
bottom: 0;
}

#innerContent{
    border: 1px solid black;
    display:inline-block;
    margin:0 auto;
}

＆＃13;

<div id = 'outer'> 
    <div id = 'inner'>
        <div id='innerContent'>hesisaveylongstringloremipsum<br>
          <input type='submit'>
      </div>
    </div>
</div>

＆＃13;

Answer 2

在transform text-align:center中使用outter而不使用div（如果文字不会居中）并避免margin:0 auto;在{ {1}} #inner。

＆＃13;

div

＆＃13;

#outer {
border: 1px solid black;
height: 500px;
position:relative;
}

#inner {
border: 1px solid black;
display: inline;
position:absolute;
bottom:0;
left:50%; 
transform: translateX(-50%);
}

＆＃13;

居中，垂直对齐底部，div不工作，CSS，HTML

2 个答案: