我无法在页面中央对齐行/列。我尝试使用边距、填充和不同的对齐方式，没有任何改变。我不知道我在哪里犯了错误。此 CSS 表是通用的，但对于特定页面，内容位于底部。
对于行和列，我使用了生成器/已经制作好的表格并根据我的需要进行了编辑，所以也许这就是问题所在？
CSS:
* {
box-sizing: border-box; /*universal box-sizing*/
}
body, html {
margin-left: 0px; /*zunanji odmik*/
margin-right: 0px;
background-color: #b3b3ff; /*hex value*/
font-family: "Comic Sans MS", cursive, sans-serif;
margin: 0px; /*drugace nastavi auto browser*/
}
.sticky {
position: sticky;
top: 0;
}
#h1{
padding: 10px;
background-color: #ffcc00;
color: #6600ff;
text-align: center;
margin: 0px; /*drugace nastavi auto browser*/
}
#h2 {
margin-left: 0px;
margin-right: 0px;
background-color: #ffcc00;
color: #6600ff;
text-align: center;
padding: 5px;
}
#ul{
background-color: #6600ff;
}
ul{
list-style-type: none; /*oznake v seznamu*/
margin: 0; /*to remove browser default settings*/
padding: 0; /*to remove browser default settings*/
overflow: hidden; /* ce bi b boxsu bilo prevec vsebine*/
background-color: #1a1aff; /*barva navigacije*/
}
li {
float: left;
}
li a {
display: block; /*kot block elements naredi celotno areo clickable-ne samo tekst*/
color: white;
text-align: center;
padding: 16px;
text-decoration: none; /*skrijes podcrtano besedilo*/
}
li a:hover {
background-color: #000033; /*barva ozadja ko se postavimo z misko*/
}
.vsebina{
max-width: 1000px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.kartica{
background-color: white;
margin-left: 1%;
margin-right: 1%;
}
/*naloga 2*/
.n2{width: 100%; } /*video*/
#n21{margin-left: 10px; margin-right: 10px;} /*zunanji odmik clankov*/
.n22{
width: 100%;
height: auto;
}
.n23{ text-align: center; } /*pripis pod sliko*/
/*Naloga 4*/
input[type=text], select {
width: 100%;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 12px;
padding-right: 20px;
margin-top: 8px;
margin-bottom: 8px;
display: inline-block;
box-sizing: border-box;
border: 2px solid red;
border-radius: 4px;
}
input[type=text]:focus, select:focus {
border: 2px solid #555;
}
textarea {
width: 100%;
height: 150px;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 12px;
padding-right: 20px;
box-sizing: border-box;
border: 2px solid red;
border-radius: 4px;
resize: none; /* prepreci spreminjanje polja*/
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
padding-top: 16px;
padding-bottom: 16px;
padding-left: 16px;
padding-right: 16px;
margin-top: 10px;
cursor: pointer;
}
/*naloga 3*/
#h3{
padding: 10px;
margin: 0px;
display:block;
height:40px;
background-color: #ffcc00;
color: #6600ff;
text-align: center;
}
.column {
float: left;
width: 25%;
padding: 0 10px 10px ;
}
/* Remove extra left and right margins, due to padding */
.row {
margin: 0 -50px;
}
/* Clear floats after the columns, postavi 3x2 */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
@media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
.slika3{
max-width: 100%;
max-height: 100%;
padding: 0px;
margin: 0px;
}
HTML
<!DOCTYPE html>
<html lang="si">
<head>
<meta charset="UTF-8">
<title>Ponudba</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="sticky">
<h1 id="h1">Tilenova spletna stran </h1>
<ul id="ul">
<li><a href="index.html">Domov</a></li>
<li><a href="ponudba.html">Ponudba</a></li>
<li><a href="anketa.html">Anketa</a></li>
<li><a href="https://estudij.um.si" target="_blank">Vaje</a></li>
</ul>
</div>
<div class="vsebina">
<div class="row">
<div class="column">
<div class="kartica">
<h3 id="h3">Mercedes-Benz</h3>
<img class="slika3" src="images/Mercedes.jpg" alt="Mercedes">
<div class="opis">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non risus ipsum.
Curabitur in consectetur mauris, nec ultrices elit.
</div>
</div>
</div>
<div class="column">
<div class="kartica">
<h3 id="h3">Audi RS7 Sportback</h3>
<img class="slika3" src="images/Audi.jpg" alt="Audi">
<div class="opis">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non risus ipsum.
Curabitur in consectetur mauris, nec ultrices elit.
</div>
</div>
</div>
<div class="column">
<div class="kartica">
<h3 id="h3">Nissan 370Z</h3>
<img class="slika3" src="images/nissan.jpg" alt="nissan">
<div class="opis">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non risus ipsum.
Curabitur in consectetur mauris, nec ultrices elit.
</div>
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="kartica">
<h3 id="h3">Mini Cooper S</h3>
<img class="slika3" src="images/mini.jpg" alt="mini">
<div class="opis">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non risus ipsum.
Curabitur in consectetur mauris, nec ultrices elit.
</div>
</div>
</div>
<div class="column">
<div class="kartica">
<h3 id="h3">Jaguar F-type</h3>
<img class="slika3" src="images/jaguar.jpg" alt="jaguar">
<div class="opis">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non risus ipsum.
Curabitur in consectetur mauris, nec ultrices elit.
</div>
</div>
</div>
<div class="column">
<div class="kartica">
<h3 id="h3">Tesla Model S</h3>
<img class="slika3" src="images/tesla.jpg" alt="tesla">
<div class="opis">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non risus ipsum.
Curabitur in consectetur mauris, nec ultrices elit.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
最佳答案
您在行中使用了 3 列，但将宽度设置为 25%。这样你就永远不会让它们居中。要么使用 4 列，要么将宽度设置为 33.33%。
然后在您的样式表中也删除此部分:
.row {
margin: 0 -50px;
}
这是一个 fiddle : https://jsfiddle.net/4xf53vLe/
关于html - 页面中心的列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53277137/