learning_natty
New Coder
Hello! This is my first time posting here, as I've been looking through various sources to try to get some help, with no luck. To fill you in what I'm wanting to do - I'm working on a Udemy.com course where a developer is walking us through creating simple, responsive html/css emails that work in many different versions of outlook, browsers, etc. He builds them only in nested tables - no flex (I hope to learn flex soon, but this course materials is all I can do and focus on right now). I've sucesfully been able to create different sections, columns, that are responsive so I'm really happy about that. And they render nicely. However, I'm stuck on a concept I'm wanting to implement. Its a two column row, where in the left column, I have a logo and some text under one another and on the right I have a simple image. I'm needing it to be centered and vertical-aligned in the middle. I've tried to add text-align:center, and vertical-align to different td's, and I haven't had any luck. I noticed that when I add vertical-align: bottom to the first table with the class "column" everything nicely goes to the bottom, but not sure why middle doesn't work. I'm wanting to know what can I do in the code below to achieve what my screen shot attached show ,I am sure there is a way, and my inexperience is causing this problem. There must be a way to do this without flex?
For your convenience here is a link to a JSFiddle, I hope it helps: JS Fiddle public link. Please ignore the ugly colors, text. I'm wanting to focus on the layout first. Appreciate any comments!
For your convenience here is a link to a JSFiddle, I hope it helps: JS Fiddle public link. Please ignore the ugly colors, text. I'm wanting to focus on the layout first. Appreciate any comments!
HTML:
<body style="Margin:0; padding:0; min-width: 100%; background-color: #dde0e1;">
<center style="width:100%; table-layout: fixed; background-color: #dde0e1; padding-bottom: 20px;">
<div style="max-width: 600px; background-color: #FAFDFE; box-shadow: 0 0 10px rgba(0,0,0,.2);">
<!--mastertable_start-->
<table align="center" style="border-spacing: 0; color: #565656; font-family: 'Lato', sans-serif, Arial, Helvetica!important; background-color: #FAFDFE; Margin:0; padding: 0; width:100%; max-width: 600px;" role="presentation">
<!--topheader_2columns_start-->
<tr>
<td style="padding:0; background-color: blue;">
<table width="100%" style="border-spacing:0;" role="presentation">
<tr>
<td class="two-columns" style="padding:0; font-size:0; text-align: center;">
<table class="column" style="border-spacing:0; vertical-align: top; width:100%; max-width: 300px; display:inline-block;" role="presentation">
<tr>
<td>
<table class="content" style="border-spacing:0; text-align: left;" role="presentation">
<tr>
<td>
<img src="https://i.ibb.co/rx31TX7/html-email.png" width="200" style="max-width: 200px;" border="0">
</td>
</tr>
<tr style="padding:0px;">
<td>
<p style="font-size:17px; font-weight:bold;">Lorem ipsum this is some text</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="column" style="border-spacing:0; vertical-align: top; width:100%; max-width: 300px; display:inline-block;" role="presentation">
<tr>
<td>
<table class="content" style="border-spacing:0; text-align: left;" role="presentation">
<tr>
<td>
<img src="https://i.ibb.co/nQn29Sg/woman-teal.jpg" width="300" border="0" style="max-width: 300px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--topheader_end-->
</table><!--mastertable_end-->
</div>
</center>
</body>
</html>
