Question

所以...我在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);
}

Answer 1

使用此jsfiddle https://jsfiddle.net/hayrugh0/

并检查页面，有ul元素引起的左填充，它是浏览器的默认填充

附加此css规则，它应该居中

ul {
  padding: 0;
}

希望有意义

Answer 2

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

文本对齐不正确居中

2 个答案: