Display table-cell vertical-align middle create 1px weird spacing in chrome

Question

I need to centre my content in the div, so I use the table-cell and vertical-align to achieve it. However, it create a weird spacing like 1px in Chrome only. I can't really find the solution. Please do help me.

 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> 

The demo : https://codepen.io/rae0724/pen/jwxJqX

Answer 1

If you can do without display: table in .txt-wrapper , if this is not a problem for other things ... the strange effect disappears

 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>