Подскажите, как сделать выравнивание ячейку таблицы по центру, по горизонтали. (HTML письма)
https://jsfiddle.net/42xsmuy9/
Подскажите, как выровнять ячейку с классом center_top (с фразой Dear Customer ...) по центру данной таблицы ? (Можно добавлять классы, но не вынося фразу за пределы синего блока)
Верстка, CSS, HTML, SVG
Верстка письма. Выравнивание ячейки таблицы по центру
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Документ</title>
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
}
.text-center {
text-align: center;
}
.logo-custom {
width: 130px;
}
.logo-text {
text-decoration: underline;
cursor: pointer;
color: rgb(255, 255, 255);
font-weight: bold;
}
.bgc-table {
background-color: rgb(56, 110, 217);
}
.main-subtext {
text-indent: 1.5em;
text-align: justify;
}
.bgc-table td.hello {
padding-bottom: 12px;
}
.bgc-table td {
padding-left: 4px;
padding-right: 4px;
}
</style>
</head>
<body>
<table class="bgc-table" width="100%">
<col width="25%" valign="left">
<col width="50%" valign="center">
<col width="25%" valign="right">
<tr>
<td><img class="logo-custom" src="https://dynamic.brandcrowd.com/asset/logo/b72b8443-ddfd-48a9-a8d6-2995f569a539/logo?v=4" alt=""></td>
<td></td>
<td class="text-center"><span class="logo-text">View in Browser</span></td>
</tr>
<tr>
<td colspan="3" class="main-text text-center hello">Dear Customer,</td>
</tr>
<tr>
<td colspan="3" class="main-subtext text-center">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, voluptatem, earum perspiciatis soluta velit rem quod illo nulla enim quidem delectus optio accusantium molestias doloremque vitae corrupti ab repudiandae numquam!</div>
<div>Officia, ratione, fuga, dolorum consequatur totam inventore natus eius eveniet vel dolor repudiandae ab amet rerum! Quaerat, quae, architecto, reprehenderit, ullam ipsam unde ea iure sapiente quisquam nostrum aliquam sit.</div>
<div>Harum, possimus at quam totam necessitatibus dolorum libero excepturi alias doloremque autem. Quibusdam, ipsa, quaerat adipisci quas impedit fugiat iste consectetur blanditiis possimus ducimus obcaecati porro itaque totam deleniti odio?</div>
</td>
</tr>
</table>
</body>
</html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Документ</title>
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
}
.text-center {
text-align: center;
}
.logo-custom {
width: 130px;
}
.logo-text {
text-decoration: underline;
cursor: pointer;
color: rgb(255, 255, 255);
font-weight: bold;
}
.bgc-table {
background-color: rgb(56, 110, 217);
}
.main-subtext {
text-indent: 1.5em;
text-align: justify;
}
.bgc-table td.hello {
padding-bottom: 12px;
}
.bgc-table td {
padding-left: 4px;
padding-right: 4px;
}
</style>
</head>
<body>
<table class="bgc-table" width="100%">
<col width="25%" valign="left">
<col width="50%" valign="center">
<col width="25%" valign="right">
<tr>
<td><img class="logo-custom" src="https://dynamic.brandcrowd.com/asset/logo/b72b8443-ddfd-48a9-a8d6-2995f569a539/logo?v=4" alt=""></td>
<td></td>
<td class="text-center"><span class="logo-text">View in Browser</span></td>
</tr>
<tr>
<td colspan="3" class="main-text text-center hello">Dear Customer,</td>
</tr>
<tr>
<td colspan="3" class="main-subtext text-center">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, voluptatem, earum perspiciatis soluta velit rem quod illo nulla enim quidem delectus optio accusantium molestias doloremque vitae corrupti ab repudiandae numquam!</div>
<div>Officia, ratione, fuga, dolorum consequatur totam inventore natus eius eveniet vel dolor repudiandae ab amet rerum! Quaerat, quae, architecto, reprehenderit, ullam ipsam unde ea iure sapiente quisquam nostrum aliquam sit.</div>
<div>Harum, possimus at quam totam necessitatibus dolorum libero excepturi alias doloremque autem. Quibusdam, ipsa, quaerat adipisci quas impedit fugiat iste consectetur blanditiis possimus ducimus obcaecati porro itaque totam deleniti odio?</div>
</td>
</tr>
</table>
</body>
</html>
Похожие вопросы
- Сложная таблица HTML, объединение ячеек
- Общие вопросы к специалистам по стилю верстки.
- Кто занимается фрилансом, (html, css верстка). Как научиться?
- Сложно ли научиться вёрстке?
- Помощь в разработке сайта. (макет, хостинг и домен есть. Не понимаю что делать с версткой и куда ее загружать)
- Дайте достаточно информации про верстку! <3
- При верстке макета сайта в html какую лучше использовать верстку? Блочную или семантическую? Ответ пожалуйста обоснуйте.
- Как сделать, чтобы вёрстка не слетала на разных мониторах
- Поможет ли вёрстка сайтов закрепить новичку знания HTML и CSS? Или лучше вёрсткой заниматься когда всё знаешь?
- Что такое адаптивная вёрстка