Html CSS中心垂直分割为一个Div_Html_Css_Center_Vertical Alignment

Html CSS中心垂直分割为一个Div

html css

Html CSS中心垂直分割为一个Div,html,css,center,vertical-alignment,Html,Css,Center,Vertical Alignment,我有个问题，我需要将包含“三”的div垂直居中：关于包含图像的div，我该怎么做这是我的标记： <div class="content"> <div class="tablediv"></div> <div class="onecolumn center"><h3>TITLE</h3></div> </div> <div class="tablediv">

我有个问题，我需要将包含“三”的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>

这是小提琴：

试着用桌子代替

<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>


一:
---
二:
---
三:

这就是你需要的吗。。。有两件事需要注意： 1）始终使用位置和显示属性 2）空格（或打断线）也算作子元素，这就是为什么在div之间有空格时，三次使用33.33%不起作用的原因

<!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>


在此处插入标题
表格{
位置：相对位置；
显示：内联块；
宽度：100%；
}
.中心{
文本对齐：居中；
}
.左{
文本对齐：左对齐；
}
.对{
文本对齐：右对齐；
}
.图像季节{
宽度：50%；
身高：50%；
}
.三列{
位置：相对位置；
显示：内联块；
宽度：33.33%；
填充顶部：10px；
垂直对齐：中间对齐；
}
标题
一：---
二：---
三:

为什么不在此布局中使用

显示：表格/表格行/表格单元格

，而不是浮动元素？然后，您将能够使用

垂直对齐

属性。在您的帖子中，还应提供一些基本代码，而不仅仅是一个div来绕过SO检查。请不要使用填充代码元素来绕过代码要求-这是有原因的，鼓励您理解您的代码，而不是将其粘贴在小提琴中，要求我们为您解决问题，并帮助您制定具体的问题陈述。我已将您的小提琴中的代码插入到您的问题中。下次不要再这样做。@Vucko我该怎么做？谢谢大家!@Terry你为了这个原因给我提了点名气？非常感谢你！你非常非常好！我不想用桌子，有什么想法吗？

<!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>