我有一个页面,两个div并排排列在三分之一到三分之二的位置。这些包含在一个父div中。我的一个div有一个图像,我想要做的是有能力将图像垂直对齐到父div的顶部,中间或底部,其高度由第二个div中的文本数量定义。理想情况下,我希望能够为图片或内容添加一个类,这将设置对齐方式。设置与另一个div内嵌的div内的内容对齐
https://jsfiddle.net/y9mLr5xv/1/
<style type="text/css">
section {
padding: 40px 0 40px;
display: block;
box-sizing: border-box;
font-size: 16px;
line-height: 1.5;
font-family: sans-serif;
}
.inner {
width: 95%;
max-width: 1040px;
margin-left: auto;
margin-right: auto;
}
.section-body {
width: 100%;
float: left;
margin: 0;
}
.content-a {
width: 32.7%;
float: left;
}
.content-b {
width: 62.1%;
float: left;
margin-left: 4.2%;
}
h3 {
margin: 0;
}
</style>
<section class="main">
<div class="inner">
<div class="section-header">
<div class="content">
<h1>
Header here
</h1>
<p class="strap">
Strapline would go here
</p>
</div>
</div>
<div class="section-body">
<div class="content-a">
<img src="http://placehold.it/350x150">
</div>
<div class="content-b">
<h3>
Title here
</h3>
<p>
A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here.
</p>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
<p>
A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here. A bit of text here. Not sure what it would say but it be here.
</p>
</div>
</div>
</div>
</section>
我建议使用Bootstrap3。您可以使用'row'作为标题部分,左侧使用.col-xs-4,右侧使用col-xs-8 +图像使用img-responsive。然后小心使用'flex'和'flex-direction:column'。一般来说,将'flex'与bootstrap混合并不好,但在这种情况下,它应该没问题(你也可以试试Bootstrap4,据说它支持'flex'显示比以前版本更好)。对于顶部/中间/底部对齐,你可以简单地使用flex-start/center/flex-end(就像[here](http://www.w3schools.com/cssref/playit.asp?filename=playcss_align-items&preval=stretch )) – oboer