CSS中心垂直划分Div

-3

我有一个问题，我需要垂直居中包含“THREE：”div的div包含图像，我该怎么做？CSS中心垂直划分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

来源

2015-04-01 massimilianos

为什么不使用display：table/table-row/table-cell这个布局，而不是浮动元素？然后你就可以使用'vertical-align'属性。 – Vucko 2015-04-01 10:28:24

在你的文章中应提供一些基本代码，而不仅仅是一个div来规避SO检查 – fcalderan 2015-04-01 10:28:56

请不要使用填充代码元素只是为了绕过代码要求 - 这是有原因的，鼓励你理解你的代码，而不是将其粘贴在小提琴中，并要求我们为您排除故障，并帮助您制定具体的问题陈述。我已经把小提琴中的代码插入到你的问题中了 - 下次不要再这样做。 – Terry 2015-04-01 10:30:17

使用下面的CSS它会帮助你：

.imageseason{ 
    vertical-align:middle; 
    } 

.threecolumns:before { 
    content: " "; 
    display: inline-block; 
    height: 100px; //height according you need 
    vertical-align: middle; 
    } 
.threecolumns { 
    display: inline-block; 
    height: 100px; //height according you need 
    vertical-align: middle; 
}

来源

2015-04-01 10:34:46 sanjeev

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

来源

2015-04-01 10:37:06 Abhi

我不想使用表格，有什么想法？ – massimilianos 2015-04-01 11:08:44

这是你需要什么??? ...有两点需要注意： 1）始终使用位置和显示属性 2）空格（或折线）也被视为子元素，这就是三次使用33.33％时间之间不存在空格的原因div

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

来源

2015-04-11 08:17:04 user3329705

CSS中心垂直划分Div

回答

相关问题