文本对齐未正确居中答案

【问题标题】：text align not centering properly文本对齐未正确居中
【发布时间】：2016-05-25 10:35:58
【问题描述】：

所以...我在 div 中有一个图像，然后将其设置为文本/对齐，但它不是 100% 居中...与导航相同...接近但不完美...其他一切工作正常。有人可以帮我解决这个问题，因为我快疯了。提前感谢您的所有回答。

HTML

<!doctype html>
<html>
    <body>
        <head>
            <meta charset="utf-8">
            <title>Projects</title>
            <link href="css2.css" rel="stylesheet" type="text/css">
        </head>
        <head>
            <div class="logo" >
                <img src="lg.png" alt="" width="180" height="178" class="logo"/>
            </div>
            <meta charset="utf-8">
            <title>mt</title>
        </head>
        <body>
            <nav>
                <ul>
                    <li><a href="projects.html">PROJECTS</a></li>
                    <li><a href="About.html">ABOUT</a></li>
                    <li><a href="Contact.html">CONTACT</a></li>
                </ul>
            </nav>
            <div class="table" >
                <table width="900" height="200" border="0" cellspacing="7" cellpadding="9">
                    <tbody>
                        <tr>
                            <td>
                                <div class="row" > 
                                    <li>
                                        <a href="project1.html">
                                            <div class="raste">
                                                <img src="logos.jpg" alt="" width="300"/>
                                            </div>
                                        </a>
                                    </li>
                                </div>
                            </td>
                            <td> 
                                <li>
                                    <a href="project2.html">
                                        <div class="raste"> 
                                            <img src="elite.jpg" alt="" width="300"/>
                                        </div>
                                    </a>
                                </li>
                            </td>
                            <td> 
                                <li>
                                    <a href="project3.html">
                                        <div class="raste"> 
                                            <img src="time.jpg" alt="" width="300"/>
                                        </div>
                                    </a>
                                </li>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <li>
                                    <a href="project4.html">
                                        <div class="raste">  
                                            <img src="booksrie.jpg" alt="" width="300"/>
                                        </div>
                                    </a>
                                </li>
                            </td>
                            <td>
                                <li>
                                    <a href="project5.html">
                                        <div class="raste">
                                            <img src="log.jpg" alt="" width="300"/>
                                        </div>
                                    </a>
                                </li>
                            </td>
                            <td>
                                <li>
                                    <a href="project6.html">
                                        <div class="raste">
                                            <img src="log.jpg" alt="" width="300"/>
                                        </div>
                                    </a>
                                </li>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </body>
    </body>
 </html>

CSS

@charset "utf-8";
.logo {
    padding-bottom: 0.5%;
    text-align: center;
}
nav {
    font-family: "Proxima";
    text-align: center;
    font-size: 25px;
    word-spacing: 80px;
    padding-right: 50px;
    padding-bottom: 1%;
    padding-left: 50px;
    color: #000000;
}
li {
    display: inline;
    color: #000000;
}
a {
    text-decoration: none;
    color: black;
}
a:hover {
    color: lightgray;
}
a:active {
    color: black;
}
body {
    background-color: #F6F6F6;
}
table {
    margin-left: auto;
    margin-right: auto;
}
.raste img {
    height: 190px;
    width: 300px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    display: block;
    border: none;
}
.raste img:hover {
    -webkit-transform: scale(1.079);
    transform: scale(1.079);
}
.table {
    display: table;
    margin: 1em auto;
}
.row {
    display: table-row;
}
.raste {
    display: table-cell;
}
@font-face {
    font-family: Proxima;
    src: url(Fonts/Proxima_Regular.otf);
}

【问题讨论】：

为什么你有几个head和body标签？而head 标签在未封闭的body 标签内。

标签： html css image nav centering

【解决方案1】：

通过使用这个 jsfiddle https://jsfiddle.net/hayrugh0/

检查页面，ul 元素导致左填充，这是浏览器的默认填充

附加这个css规则，它应该居中

ul {
  padding: 0;
}

希望这是有道理的

【讨论】：

是div和nav中的logo
但导航确实关闭了

【解决方案2】：

您所有的图片都包含在 div 标签中，所以请您定义您想要居中的图片。谢谢

【讨论】：

只是导航...当我把 ul { padding: 0,} 在 dreaweaver 中看起来不错，但在浏览器中它看起来仍然不居中
您好！我不知道您正在使用的浏览器，但在我的浏览器中，导航是居中的。