Я создал свой первый шаблон электронной почты (упражнение).Сначала я делал это без таблиц, но позже я преобразовал его в таблицы.Теперь у меня беспорядок;Я хотел бы центрировать весь текст и заголовок, но я не знаю как.Я использовал выравнивание таблиц, но это не сработало.
Код до (divs): https://jsbin.com/pusokiyido/edit?html%2Coutput
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>emailer</title>
<meta name="description" content="Interaktywny poradnik szybkiego startu dla Brackets.">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html, body {
/*font-size: calc 8px + (16 -8) * ((100vw - 200px) / (1200 - 200))); */
color:white;
}
}
.emailer-background {
background:#eee;
}
.emial-container {
max-width: 700px;
background: #fff;
font-family: sans-serif;
text-align: center;
margin: 0 auto;
display:block;
overflow: hidden;
border-radius: 5px;
margin-bottom:30px;
}
.text{
font-size: 0,6em;
margin-left: 5px;
margin-right:5px;
padding-left:5px;
padding-right:5px;
padding-top:20px;
color:white !important;
}
.center{
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.content {
background-image: url("img/bg.jpg");
background-color: #793985;
background-repeat: no-repeat;
background-size: cover;
}
.slogan h1 {
font-size: 3vw;
color:white;
padding-right:10px;
padding-left:10px;
letter-spacing:-0.6pt;
line-height:/*44pt*/ 2,7vw; }
.separator {
background-color: rgba(154, 207, 141, 0.1);
background: rgba(154, 207, 141, 0.1);
}
/*.separator h1, h2, h3 {
color:white !important; */
}
.separator h2 {
font-size:1,5vw;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
img {
max-width:100%;
}
.flexcontainer {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
align-items: center;
justify-content: space-around;
padding-top:10px;
}
.qr, .logo {
padding-right:10px;
padding left:10px;
min-width:45px;
}
.logo {
max-width:80px;
min-width:45px;
}
.link {
letter-spacing:10pt;
font-size:16px !important;
padding-top:15px;
padding-bottom:15px;
}
.koperta li:before{
content: “\f13d”;
font-family: “FontAwesome”;
width: 10px;
height: 10px;
margin-right: 5px;
}
</style>
</head>
<body>
<div class="emailer-background">
<div class="emial-container">
<a href="#"></a>
<div class="content">
<div class="separator">
<img src="img/heder.jpg" alt="header image">
<div class="text"><b>usługi fotograficzne</b>: wywoływanie fotografii z każdego typu nośnika i klisz, renowacja,
retusz zdjęć, fotografia okolicznosciowa, sesje fotograficzne studyjne i plenerowe, fotografia
reklamowa i katalogowa, akcesoria foto, <br>ramki, albumy, kubki, koszulki, poduszki z Twoim projektem</p>
<p><b>usługi poligraficzne:</b> ksero, bindowanie, drukowanie, skanowanie. </div>
</div><!--separator end-->
<div class="slogan">
<h1>Zamrażanie chwil
<br>i malowanie światłem <br>
to sztuka ! </h1>
</div>
<div class="slogan2">
<div class="separator">
<h2>Chcesz zobaczyć jak to działa?<br>
Przyjdź, przyjmiemy Cię z radością ! </h2>
</div>
</div><!--slogan 2 end-->
<div class="flexcontainer">
<div class="qr">
<img src="img/qr.svg">
</div>
<div class="logo">
<img src="img/logo.svg">
</div>
<div class="qr">
</div>
<div>
<ul class="fa-ul">
<li class="koperta"> Email: <br>zorza.studio@gmail.com</li>
<li>Tel. <b>697 625 645</b></li>
</ul>
</div>
</div><!--- felx end-->
<div class="separator">
<h2 class="link">facebook.com/zorza.studio</h2>
</div>
</div><!--content end-->
</div><!--container end-->
</div><!--background end-->
</html>
После (таблицы)
https://jsbin.com/muzokadutu/edit?html,output