在 div 中居中特定大小的 div答案

【问题标题】：Centering a specific sized div within a div在 div 中居中特定大小的 div
【发布时间】：2014-10-28 05:41:09
【问题描述】：

我已经尝试了将div 水平居中在div 内的常规技术。我一定还是做错了什么。查看以下 jsFiddle 并帮助我将坦克的描述集中在“Inner Level”标题下。为方便起见，我为所有 div 标签添加了边框。

HTML：

<body>
  <a href="#">
    <div class="div-inline-block" style="text-align:left;width:150px;">
      <h2>TEST</h2>
      <p>A description</p>
    </div>

    <div class="div-inline-block"><p><b>Last Update:</b><br />???</p></div>
    <div class="div-inline-block"><p><b>Flow Rate:</b><br />??? gpm</p></div>
    <div class="div-inline-block"><p><b>Inner Level:</b><br />???</p><div class="tank-level-outer"><div class="tank-level-inner"></div></div></div>
    <div class="div-inline-block"><p><b>Outer Level:</b><br />???</p></div>
    <div class="div-inline-block"><p><b>Battery Voltage:</b><br />???</p></div>
    <div class="div-inline-block"><p><b>Rainfall:</b><br />???</p></div>
    <div class="div-inline-block" style="text-align:left;width:100%;"><p><b>Notifications:</b><br />???<br />???</p></div>
   </a>
</body>

CSS：

a{
    text-decoration:none;
}
div{
    border:1px solid red;
}
.div-inline-block {
    text-align: center;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    margin-left:15px;
    width: 100px;
}
.tank-level-outer {
    border:1px solid black;
    width:25px;
    height:32px;
    display:table-cell;
    vertical-align:bottom;
    margin:0 auto;
}
.tank-level-inner {
    background-color:dodgerblue;
    width:25px;
    height:25px;
}

【问题讨论】：

像这样：jsfiddle.net/czgoxafr/3??
请在您的问题中发布您的代码。总是。
这里CSS-Tricks - Centering: The complete guide
下面的答案将使 div 居中，但现在内部 div 是顶部对齐而不是底部对齐。我猜在使用表格、表格单元格和对齐之间存在冲突。 display:table-cell 是将内部 div 对齐到底部的最简单方法
你是说这个小提琴是顶级的吗？？？ jsfiddle.net/czgoxafr/8请解释

标签： html css text-align

【解决方案1】：

添加这个

    .div-inline-block {
    text-align: center;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    margin-left:15px;
    width: 100px;
    margin:0 auto;
}
.tank-level-outer {
    border: 1px solid black;
    width: 25px;
    height: 32px;
    margin: 0 auto;
    padding: 0;
}
.tank-level-inner {
    background-color:dodgerblue;
    width:25px;
    height:25px;
    margin-top:7px;
    display: table;
    vertical-align: bottom;
}

更新小提琴

http://jsfiddle.net/czgoxafr/22/

【讨论】：

蓝色内层div 已完全填满外层div。它应该在 7 px 的顶部有一个间隙。

【解决方案2】：

添加这个：

.tank-level-outer {
    display: table;
    margin: 0 auto;
}

【讨论】：

解释一下您的解决方案会很有帮助。
使div 居中，但现在内部div 是顶部对齐而不是底部对齐。我猜在使用table、table-cell 和对齐之间存在冲突。 display:table-cell 是将内部 div 与底部对齐的最简单方法。

【解决方案3】：

更改 div .tank-level-outer 的 css 并添加边距零 auto ，删除显示表格单元

.tank-level-outer {
border: 1px solid #000;
width: 25px;
height: 32px;
margin: 0px auto;
vertical-align: bottom;}

【讨论】：

【解决方案4】：

这行得通：

.tank-level-outer {
   width:25px;
   height:32px;
   display:block; // not necessary since this class is applied to a div
   vertical-align:bottom;
   margin:0 auto;
}

【讨论】：

【解决方案5】：

试试这个：

//css

.firstDiv{
padding:25% 25% 25% 25%
height:400px;
width:400px;
background-color:red;
}

.secondDiv{
height:200px;
width:200px;
background-color:pink;
}

//html

<div class="firstDiv">
<div class="secondDiv">
</div>
</div>

【讨论】：