【发布时间】：2020-11-07 18:21:35
【问题描述】：
我一直在尝试为我的图形设计组合使用 bootstrap 4，但事情并没有按计划进行。我在定位元素时遇到了很多问题，因为 mx-auto 类并不总是有效，父 div 上的 align-items-center 或 align-self-center 也不行。我不知道我做错了什么，但我已经尝试了各种组合来制作带有“tahan grafica e fotografia”的主页，如图所示，但垂直居中。由于我无法通过类达到相同的结果，我只是用相对位置移动它们。取得的结果是一样的，但就编码而言，我很确定这不是我应该走的路。同样的情况也发生在两个卷轴上，黑色的和白色的。它们是它们应该在的位置，但它们已被手动放置在相对位置。有人可以帮助我吗？我不明白我在使用类时做错了什么。我认为问题之一是我不知道什么时候应该创建一个 div，什么时候不应该。例如，我有我的容器流体，我有行，我应该将徽标图像和其他两个文本放置在没有 div 的位置吗？如果不是，我为什么要创建它？谢谢。
<!DOCTYPE html>
<html lang="it">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
<!-- CSS link -->
<link rel="stylesheet" href="vendor/bootstrap-4.4.1-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!-- Fonts -->
<!-- Karla -->
<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<!-- CormorantGaramond -->
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<!-- page title -->
<title>Tahan</title>
</head>
<body>
<div class="container-fluid">
<div class="row home-cont full-height justify-content-center">
<div class="col-12 homepage align-self-center">
<div class="logo mx-auto">
<img src="images/tahan.png" alt="tahan" class="header-title img-fluid">
<div class="logo-subtext">
<span class="header-category d-inline-block text-left">
grafica
</span>
<span class="header-category d-inline-block text-right">
fotografia
</span>
</div>
</div>
</div>
<div>
<a href="#down">
<img class="scroll mx-auto" id="blackscroll" src="images/iconblack.png">
</a>
</div>
</div>
</div>
<div class="container-fluid parts-cont full-height" id="down">
<div class="row partsofme">
<div class="col-3 col-lg-1 offset-lg-1">
<img src="images/website17.png" class="object-prayer img-fluid">
</div>
<div class="col-3 col-lg-1">
<img src="images/website28.png" class="object-mom img-fluid">
</div>
<div class="col-3 col-lg-1">
<img src="images/website26.png" class="object-notebook img-fluid">
</div>
<div class="col-3 col-lg-1">
<img src="images/website23.png" class="object-passportven img-fluid">
</div>
<div class="col-3 col-lg-1">
<img src="images/website39.png" class="object-fuji img-fluid">
</div>
<div class="col-3 col-lg-1">
<img src="images/website32.png" class="object-drawing img-fluid">
</div>
<div class="col-3 col-lg-1">
<img src="images/website7.png" class="object-oleum img-fluid">
</div>
<div class="col-3 col-lg-1">
<img src="images/website34.png" class="object-cedula img-fluid">
</div>
<div class="col-3 col-lg-1">
<img src="images/website1.png" class="object-paintingtable d-none d-lg-block img-fluid">
</div>
<div class="col-3 col-lg-1">
<img src="images/website39.png" class="object-fuji d-none d-lg-block img-fluid">
</div>
<div class="col-3 col-lg-1 offset-lg-1">
<img src="images/website6.png" class="object-peluche align-self-center img-fluid">
</div>
<div class="col-3 col-lg-1">
<img src="images/website20.png" class="object-postagestamp align-self-center img-fluid">
</div>
<div class="partidime col-6 col-lg-6 d-lg-flex text-white ">
<p>alcu</br>ne p<span id="inserto1">ar</span>ti <span id="inserto2">d</span>i me</p>
</div>
<div class="col-3 col-lg-1">
<img src="images/website21.png" class="object-sd align-self-center img-fluid">
</div>
<div class="col-3 col-lg-1">
<img src="images/website40.png" class="object-letraset d-none d-lg-block img-fluid align-self-center ">
</div>
<div class="col-3 col-lg-1 offset-lg-1">
<img src="images/website2.png" class="object-kodak img-fluid">
</div>
<div class="col-3 col-lg-1">
<img src="images/website36.png" class="object-windsorandnewton img-fluid">
</div>
<div class="col-3 col-lg-1">
<img src="images/website13.png" class="object-rufa d-none d-lg-block img-fluid">
</div>
<div class="col-3 col-lg-1">
<img src="images/website37.png" class="object-bolivar img-fluid">
</div>
<div class="col-3 col-lg-1">
<img src="images/website21.png" class="object-sd d-none d-lg-block img-fluid">
</div>
<div class="col-3 col-lg-1">
<img src="images/website30.png" class="object-madrid img-fluid">
</div>
<div class="col-3 col-lg-1">
<img src="images/website10.png" class="object-pendrive img-fluid">
</div>
<div class="col-3 col-lg-1">
<img src="images/website16.png" class="object-magnet img-fluid">
</div>
<div class="col-3 col-lg-1">
<img src="images/website15.png" class="object-moleskine img-fluid">
</div>
<div class="col-3 col-lg-1">
<img src="images/website41.png" class="object-earphones img-fluid">
</div>
<div class="col-3 col-lg-1 offset-lg-1">
<img src="images/website12.png" class="object-olympus img-fluid">
</div>
<div class="col-3 col-lg-1">
<img src="images/website3.png" class="object-hairclip img-fluid">
</div>
<div class="col-3 col-lg-1">
<img src="images/website33.png" class="object-collage img-fluid">
</div>
<div class="col-3 col-lg-1">
<img src="images/website25.png" class="object-passportit img-fluid">
</div>
<div class="col-3 col-lg-1">
<img src="images/website29.png" class="object-story img-fluid">
</div>
<div class="col-3 col-lg-1">
<img src="images/website31.png" class="object-polaroid img-fluid">
</div>
<div class="col-3 col-lg-1">
<img src="images/website4.png" class="object-brush img-fluid">
</div>
<div class="col-3 col-lg-1">
<img src="images/website27.png" class="object-abc img-fluid">
</div>
<div class="col-3 col-lg-1">
<img src="images/website8.png" class="object-glue img-fluid">
</div>
<div class="col-3 col-lg-1">
<img src="images/website5.png" class="object-pen img-fluid">
</div>
<div class="text-center justify-content-center d-block">
<a class="" href="#down2">
<img class="scroll" id="whitescroll" src="images/iconwhite.png">
</a>
</div>
</div>
</div>
<!-- Optional JavaScript before /body -->
<script src="vendor/jquery-3.4.1.slim.min.js"></script>
<script src="vendor/bootstrap-4.4.1-dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
我的 CSS：
/* Mobile first (phones/tablets, 0 and up) */
html {
font-size: 16px; /* valore consigliato 16px, 1rem è uguale a questo valore */
scroll-behavior: smooth;
}
body {
background-color: #ffffff;
color: #000000;
}
.full-height {
height: 100vh;
}
.header {
position: relative;
}
.logo {
position: relative;
top:120px;
width: 170px;
}
.logo-subtext span {
width: 48%;
font-family: Arial;
font-size: 19px;
position:relative;
top:-15px;
}
.scroll{
max-height: 30px;
max-width: 30px;
}
#blackscroll{
position: relative;
top:200px;
}
.parts-cont {
background-color: black;
}
.partsofme {
position: relative;
padding-top: 15px;
padding-bottom: 20px;
}
.partidime{
color: white;
font-size:110px;
font-family: 'Karla', sans-serif;
text-align: left;
line-height: 90px;
position: absolute;
top:120;
}
#inserto1{
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: medium;
font-size: 140px;
}
#inserto2{
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: medium;
font-size: 110px;
}
.chi-cont{
background-color: black;
display: inline-block
}
.chisono{
background-color: black;
display: inline-block
}
.biography p{
font-family: Karla;
font-size: 16px;
text-align: left;
color: white;
line-height: 20px;
margin-bottom: 0;
}
#cv{
font-weight: bold;
}
.
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.partidime{
font-size:300px;
text-align: left;
line-height: 230px;
z-index: 9;
}
#inserto1{
font-size: 300px;
}
#inserto2{
font-size: 300px;
}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.logo {
width: 260px;
}
.full-height{
max-height: 100vh;
}
.logo-subtext span {
width: 48%;
font-size: 30px;
}
.partsofme {
padding-top: 150px;
padding-bottom: 50px;
}
.partidime{
font-size:120px;
text-align: center;
line-height: 90px;
position:static;
}
.partidime br {
display: none;
}
#inserto1{
font-size: 150px;
}
#inserto2{
font-size: 120px;
}
.biography p{
line-height: 30px;
}
#blackscroll{
position: relative;
top:300px;
}
#whitescroll{
position: relative;
top:150px;
}
}
【问题讨论】：
标签： html css bootstrap-4