所以...我在 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);
}
最佳答案
通过使用这个 jsfiddle https://jsfiddle.net/hayrugh0/
并检查页面，存在由 ul 元素引起的左填充，它是浏览器的默认填充
附上这个CSS规则，它应该居中
ul {
padding: 0;
}
希望这是有道理的
关于html - 文本对齐不正确居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35393755/