文字居中且对齐
任何人都可以帮助我。我不明白为什么我的文字是合理的但没有居中。在大屏幕上可以，但在iPhone屏幕上则可以，但稍微偏左。我怎样才能使文本居中并使其合理？请帮助我纠正问题。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>*|MC:SUBJECT|*</title>
<!-- DELETE AND REPLACE WITH YOUR OWN TITLE IF NOT USING MAILCHIMP -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
@media (max-width: 700px){
.responsive{
width:100% !important;
padding-left:2% !important;
padding-right:2% !important;
text-align:center-justify !important;
margin-left:auto !important;
margin-right:auto !important;
}
} @media (max-width: 700px){
.height{
height:auto !important;
text-align:center !important;
}
} @media (max-width: 700px){
.responsive img{
width:100% !important;
height:auto !important;
text-align:center !important;
}
} @media (max-width: 700px){
*{
font-size:12px;
}
}</style></head>
<body bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0" bgcolor="#ffffff">
<!-- START SECTION ONE -->
<table bgcolor="#ffffff" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table bgcolor="#ffffff" align="center" style="width:100%;max-width:640px;border-bottom:1px solid #707070;">
<tr>
<td align="center" style="padding:0px 0px 0px 0px;">
<table align="center" style="width:100%;max-width:620px;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table align="center" style="width:100%;margin-left:auto;margin-right:auto;">
<tr>
<td width="100%" align="right" style="padding:10px;text-decoration:none;color:#000000;font-size:10px;font-family:Helvetica, Arial, sans-serif;font-weight:normal;">
</td>
</tr>
<tr>
<td width="100%" align="center" style="padding:0px 0px 0px 0px;">
<img src="https://gallery.mailchimp.com/6dd6910c9a28d84d5d2a32040/images/8522c4a9-c0fd-445f-9e6a-413d2fb16b7b.jpeg" width="90%" border="0" alt="logo.png">
</td>
</tr>
</table>
<table align="center" style="width:100%;max-width:600px;" border="0" cellpadding="0" cellspacing="0" class="responsive">
<tr>
<td align="center" width="100%" style="padding:10px 10px 10px 10px;font-size:14px;font-family:Helvetica, Arial, sans-serif;font-weight:normal;line-height:20px;" class="responsive">
<!-- your navigation bar below -->
<a style="padding:10px 10px 10px 10px;color:#000000;text-decoration:none;" href="http://www.mellorgroup.ca/en/about">
ABOUT US
</a>
<a style="padding:10px 10px 10px 10px;color:#000000;text-decoration:none;" href="http://www.mellorgroup.ca/en/about#!contact">
BROKERS
</a>
<a style="padding:10px 10px 10px 10px;color:#000000;text-decoration:none;" href="http://www.mellorgroup.ca/en/home#!contact">
CONTACT
</a>
<a style="padding:10px 10px 10px 10px;color:#000000;text-decoration:none;" href="www.">
PROPERTIES
</a>
<!-- your navigation bar above -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END SECTION ONE -->
<!-- START SECTION TWO -->
<table bgcolor="#ffffff" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table bgcolor="#ffffff" align="center" style="width:100%;max-width:640px;border-bottom:1px solid #707070;">
<tr>
<td align="center" style="padding:20px 0px 10px 0px;">
<table style="width:100%;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<!----------------------- PHOTO 1 ----------------------->
<table align="center" style="width:100%;height:auto;" class="responsive">
<tr>
<td width="100%" align="center" style="padding:0px 0px 0px 0px;" class="responsive padding-bottom-image">
<img src="https://gallery.mailchimp.com/6dd6910c9a28d84d5d2a32040/images/e45c27ca-a768-464b-8f17-cca76f8ff0af.gif" width="600" height="280" alt="gif">
</td>
</tr>
</table>
<!----------------------------- PHOTO 1 ----------------------->
<table align="center" style="width:100%;min-width:250px;margin-left:auto;margin-right:auto;" class="responsive height">
<tr>
<td align="center" style="padding:20px 0px 0px 0px;font-size:20px;font-family:Helvetica, Arial, sans-serif;color:#000000;font-weight:bold;letter-spacing:2px;" class="responsive padding">
TIPS FOR INSTAGRAM
</td>
</tr>
<tr>
<td align="center" style="padding:0px 0px 0px 0px;font-size:16px;font-family:Helvetica, Arial, sans-serif;color:#000000;font-weight:bold;letter-spacing:4px;" class="responsive padding">
</td>
</tr>
<tr>
<td align="justify" style="font-size:14px;line-height:24px;font-family:Helvetica, Arial, sans-serif;color:#000000;letter-spacing:1px;padding:0px 0px 0px 0px;" class="responsive">
Did you know that in 2017 Instagram saw the fastest user growth rate in its
history — instead of slowing down, it’s actually growing faster these days. Instagram is the platform to beat right now. People are there, the growth is there, the
engagement is happening, and the creative and advertising tools are available to all.
</td>
<td align="center" style="padding:0px 0px 0px 0px;font-size:16px;font-family:Helvetica, Arial, sans-serif;color:#000000;font-weight:bold;letter-spacing:4px;" class="responsive padding">
</td>
</tr>
<tr>
<td align="center" style="padding:30px 0px 10px 0px;font-size:15px;font-family:Helvetica, Arial, sans-serif;color:#000000;font-weight:bold;letter-spacing:4px;" class="responsive padding">
<hr style="width:30px;background-color:#707070;color:#707070;height:0px;">
LET'S MEET | DISCUTONS
</td>
</tr>
<tr>
<td align="center" style="font-size:12px;line-height:10px;font-family:Helvetica, Arial, sans-serif;color:#000000;letter-spacing:1px;padding:0px 0 20px 0;" class="responsive">
emailadress
<!-- END SECTION FOUR -->
<!-- START SECTION FIVE -->
<table bgcolor="#ffffff" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table bgcolor="#ffffff" align="center" style="width:100%;max-width:640px;">
<tr>
<td align="center" style="padding:20px 0px 0px 0px;">
<table style="width:100%;max-width:600px;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table align="center" style="width:90%;" class="responsive">
<tr>
<td align="center" style="font-size:12px;line-height:16px;font-family:Verdana, Helvetica, Arial, sans-serif;color:#333333;padding:15px 0 5px 0;">
© 2018. Mellor Group, All rights reserved.
</td>
</tr>
<tr>
<td align="center" style="font-size:12px;line-height:16px;font-family:Verdana, Helvetica, Arial, sans-serif;color:#333333;padding:5px 0 15px 0;">
</td>
</tr>
</table>
<!-- SOCIAL ICONS -->
</td>
</tr>
<tr>
<td align="center" style="padding:0px 0px 20px 0px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" style="padding:0px 5px 0px 5px;">
<a href="http://www.mellorgroup.ca/en/home" style="display:inline-block;" target="_blank"><img src="https://gallery.mailchimp.com/6dd6910c9a28d84d5d2a32040/images/0c0a64f4-17ae-4251-8e57-c0f132bd1453.png" width="25" height="25" alt="facebook icon"></a>
</td>
<td align="center" style="padding:0px 5px 0px 5px;">
<a href="https://www.facebook.com/etienne.mellor" style="display:inline-block;" target="_blank"><img src="https://gallery.mailchimp.com/6dd6910c9a28d84d5d2a32040/images/121a7d4d-aff4-46db-b815-7ba26a405185.png" width="25" height="25" alt="facebook icon"></a>
</td>
<td align="center" style="padding:0px 5px 0px 5px;">
<a href="https://www.linkedin.com/in/etienne-d-mellor-57866a15/" style="display:inline-block;" target="_blank"><img src="https://gallery.mailchimp.com/6dd6910c9a28d84d5d2a32040/images/4ef59692-55f3-4b8f-a966-5290c968d50a.png" width="25" height="25" alt="linkedin icon"></a>
</td>
<td align="center" style="padding:0px 5px 0px 5px;">
<a href="https://www.instagram.com/royallepageheritage/" style="display:inline-block;" target="_blank"><img src="https://gallery.mailchimp.com/6dd6910c9a28d84d5d2a32040/images/1eeeed4b-1377-4f25-89f0-e87215193ac5.png" width="25" height="25" alt="instagram icon"></a>
</td>
<td align="center" style="padding:0px 5px 0px 5px;">
<a href="https://twitter.com/heritagerlp" style="display:inline-block;" target="_blank"><img src="https://gallery.mailchimp.com/6dd6910c9a28d84d5d2a32040/images/36510e9f-1dc7-4f88-b29c-3d7c0d6d263b.png" width="25" height="25" alt="twitter icon"></a>
</td>
<td align="center" style="padding:0px 5px 0px 5px;">
<a href="tel:514-934-1818" style="display:inline-block;" target="_blank"><img src="https://gallery.mailchimp.com/6dd6910c9a28d84d5d2a32040/images/9625317f-135b-4d08-bf8f-f242958c85cd.png" width="25" height="25" alt="phone"></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- END SOCIAL BUTTONS -->
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
1 个答案:
答案 0 :(得分：0)
我将您的代码段扩展为全屏，并使用开发人员工具窗口对其进行了检查，我注意到此<td>元素正在占据屏幕右侧的空间，这似乎是导致该情况的原因您的其他元素偏离中心：
<td align="center" style="padding:0px 0px 0px 0px;font-size:16px;font-family:Helvetica, Arial, sans-serif;color:#000000;font-weight:bold;letter-spacing:4px;" class="responsive padding">
</td>
我尝试仅删除该元素，但似乎可以解决问题。元素与您的文本段落一起嵌套在<tr>元素内：
<tr>
<td align="justify" style="font-size:14px;line-height:24px;font-family:Helvetica, Arial, sans-serif;color:#000000;letter-spacing:1px;padding:0px 0px 0px 0px;" class="responsive">
Did you know that in 2017 Instagram saw the fastest user growth rate in its
history — instead of slowing down, it’s actually growing faster these days. Instagram is the platform to beat right now. People are there, the growth is there, the
engagement is happening, and the creative and advertising tools are available to all.
</td>
<td align="center" style="padding:0px 0px 0px 0px;font-size:16px;font-family:Helvetica, Arial, sans-serif;color:#000000;font-weight:bold;letter-spacing:4px;" class="responsive padding">
</td>
</tr>
以下是该元素的屏幕截图：
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？