CSS 垂直居中 Div 成一个 Div答案

【问题标题】：CSS center vertically Div into a DivCSS 垂直居中 Div 成一个 Div
【发布时间】：2015-06-05 22:59:31
【问题描述】：

我有一个问题，我需要将包含“三：”的 div 相对于包含图像的 div 垂直居中，我该怎么做？

这是我的标记：

<div class="content">
   <div class="tablediv"></div>
      <div class="onecolumn center"><h3>TITLE</h3></div>
   </div>
   <div class="tablediv">
      <div class="threecolumns left">ONE:</div>
      <div class="threecolumns center">&nbsp;</div>
      <div class="threecolumns center">- - -</div>
   </div>
   <div class="tablediv">
      <div class="threecolumns left">TWO:</div>
      <div class="threecolumns center">&nbsp;</div>
      <div class="threecolumns center">- - -</div>
   </div>
   <div class="tablediv">
      <div class="threecolumns left">THREE:</div>
      <div class="threecolumns center">&nbsp;</div>
      <div class="threecolumns center"><img class="imageseason" src="http://www.videcom.com/Portals/0/linux_u2.png"></div>
   </div>
</div>

使用以下样式表：

.center {
    text-align: center;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.imageseason {
    width: 50%;
    height: 50%;
}

.divtable {
    position: relative;
    clear: left; 
    width: 90%;
    padding-top: 10px;
    padding-left: 15px;
    padding-right: 15px;
}

.onecolumn {
    float: left;
    width: 100%;
    padding-top: 10px;
}

.twocolumns {
    float: left;
    width: 50%;
    padding-top: 10px;
}

.threecolumns {
    float: left;
    width: 33.333333333%;
    padding-top: 10px;
}

.fourcolumns {
    float: left;
    width: 25%;
    padding-top: 10px;
}

.fivecolumns {
    float: left;
    width: 20%;
    padding-top: 10px;
}

这是小提琴：JSFiddle Snippet

【问题讨论】：

为什么不使用display:table/table-row/table-cell 这个布局，而不是浮动元素？然后你就可以使用vertical-align属性了。
在您的帖子中还应提供一些基本代码，而不仅仅是一个 div 来规避 SO 检查
请不要使用填充代码元素来绕过代码要求——它的存在是有原因的，鼓励您理解您的代码而不是将其粘贴在小提琴中并要求我们对其进行故障排除为您服务，也可以帮助您制定具体的问题陈述。我已将您小提琴中的代码插入您的问题中-下次不要再这样做了。
@Vucko 我该怎么做？谢谢！
@Terry 你为此给了我一些声誉点？太感谢了！你很好很好！

标签： html css center vertical-alignment

【解决方案1】：

尝试改用表格

<table class="some_table">
    <tr>
        <td>ONE:</td>
        <td>---</td>
    </tr>
    <tr>
        <td>TWO:</td>
        <td>---</td>
    </tr>
    <tr>
        <td>THREE:</td>
        <td><img class="imageseason" src="http://www.videcom.com/Portals/0/linux_u2.png"></td>
    </tr>
</table>

【讨论】：

我不想用桌子，有什么想法吗？

【解决方案2】：

这是你需要的吗？？？ ...有两点需要注意： 1) 始终使用位置和显示属性 2）空格（或断线）也算子元素，这就是为什么当div之间有空格时使用33.33% 3次不起作用

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>

div.tablediv {
    position: relative;
    display: inline-block;
    width: 100%;
}

.center {
    text-align: center;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.imageseason {
    width: 50%;
    height: 50%;
}

.threecolumns {
    position: relative;
    display: inline-block;
    width: 33.33%;
    padding-top: 10px;
    vertical-align: middle;
}
</style>
</head>
<body>
<div class="content">
   <div class="tablediv">
      <div class="onecolumn center"><h3>TITLE</h3></div>
   </div>
   <div class="tablediv"><div class="threecolumns left">ONE:</div><div class="threecolumns center">&nbsp;</div><div class="threecolumns center">- - -</div></div>
   <div class="tablediv"><div class="threecolumns left">TWO:</div><div class="threecolumns center">&nbsp;</div><div class="threecolumns center">- - -</div></div>
   <div class="tablediv"><div class="threecolumns left">THREE:</div><div class="threecolumns center">&nbsp;</div><div class="threecolumns center"><img class="imageseason" src="http://www.videcom.com/Portals/0/linux_u2.png"></div></div>
</div>
</body>
</html>

【讨论】：