Question

我有一个问题，我需要垂直居中包含＆＃34; THREE：＆＃34;尊重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

Answer 1

这是你需要的吗？ ......有两点需要注意： 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>

Answer 2

尝试使用表格

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

CSS中心垂直划分为Div

2 个答案: