我需要将我的内容集中在div中，所以我使用table-cell和vertical-align来实现它。但是，它只会在Chrome中创建一个奇怪的间距，如1px。我无法真正找到解决方案。请帮帮我。
body {
background: red;
}
.img-wrapper, .txt-wrapper {
height: 300px;
width: 50%;
float: left;
position: relative;
}
.img-wrapper {
background: yellow;
}
.txt-wrapper {
background: green;
display: table;
}
.txt {
display: table-cell;
vertical-align: middle;
}
.col1 {
vertical-align: middle !important;
background: yellow;
width: 50%;
}
.col2 {
background: green;
width: 50%;
}
.pushtoright {
left: 50%;
}
.pulltoleft {
right: 50%;
}<div class="therow">
<div class="img-wrapper">
<div class="img"></div>
</div>
<div class="txt-wrapper">
<div class="txt">
<h2>Title 1</h2>
<p>Description 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
</div>
</div>
<div class="therow">
<div class="img-wrapper pushtoright">
<div class="img"></div>
</div>
<div class="txt-wrapper pulltoleft">
<div class="txt">
<h2>Title 2</h2>
<p>Description 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
</div>
</div>
<div class="therow">
<div class="img-wrapper">
<div class="img"></div>
</div>
<div class="txt-wrapper">
<div class="txt">
<h2>Title 3</h2>
<p>Description 3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
</div>
</div>
<div class="therow">
<div class="img-wrapper pushtoright">
<div class="img"></div>
</div>
<div class="txt-wrapper pulltoleft">
<div class="txt">
<h2>Title 4</h2>
<p>Description 4 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
</div>
</div>
答案 0 :(得分：0)
如果你可以在 .txt-wrapper 中没有 display：table ，如果这对其他事情不是问题......奇怪的效果会消失
body {
background: red;
}
.img-wrapper, .txt-wrapper {
height: 300px;
width: 50%;
float: left;
position: relative;
}
.img-wrapper {
background: yellow;
}
.txt-wrapper {
background: green;
display: flex;
align-items:center;
/*display: table;*/
}
.txt {
display: inline-block;
padding: 20px;
}
.col1 {
vertical-align: middle !important;
background: yellow;
width: 50%;
}
.col2 {
background: green;
width: 50%;
}
.pushtoright {
left: 50%;
}
.pulltoleft {
right: 50%;
}<div class="therow">
<div class="img-wrapper">
<div class="img"></div>
</div>
<div class="txt-wrapper">
<div class="txt">
<h2>Title 1</h2>
<p>Description 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
</div>
</div>
<div class="therow">
<div class="img-wrapper pushtoright">
<div class="img"></div>
</div>
<div class="txt-wrapper pulltoleft">
<div class="txt">
<h2>Title 2</h2>
<p>Description 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
</div>
</div>
<div class="therow">
<div class="img-wrapper">
<div class="img"></div>
</div>
<div class="txt-wrapper">
<div class="txt">
<h2>Title 3</h2>
<p>Description 3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
</div>
</div>
<div class="therow">
<div class="img-wrapper pushtoright">
<div class="img"></div>
</div>
<div class="txt-wrapper pulltoleft">
<div class="txt">
<h2>Title 4</h2>
<p>Description 4 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
</div>
</div>