我怎样才能把我的照片和文字放在一起呢？
我怎样才能把我的照片和文字放在一起呢？
提问于 2022-10-03 06:39:35
我想做的是：图像
我的代码中的问题是，我使用引导网格系统轻松地实现了这一点，但是当我将这两个文本和图像放在网格系统(行和列)中时，它们看起来如下所示：问题图像。怎样才能达到我放的第一张照片中的样子呢？此外，我希望我的网站是响应。所以，请写一个相应的答案。谢谢。
HTML：
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- Own CSS-->
<link rel="stylesheet" href="stayil.css">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat:wght@300;400;600;700&display=swap"
rel="stylesheet">
<title>Bati Gozen</title>
</head>
<body>
<!-- Navbar -->
<header id="home">
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="#home">Batı Gözen</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#mywork">My Work</a>
<a class="nav-link" href="#resume">CV</a>
</div>
</div>
</div>
</nav>
<!-- Explanation !!!!!!!!I HAVE PROBLEM HERE!!!!!!!!-->
<div class="container-fluid text-center mt-3">
<div class="row justify-content-center">
<div class="col-12">
<img src="images/IMG_0109.jpg" alt="My Picture" class="img-fluid myimage">
<h1 class="name mt-4 mb-3">Batı Gözen</h1>
<p class="caption">"Web Developer, Mix&Masterig Specialist"</p>
</div>
</div>
</div>
</div>
<div class="container-fluid text-center ib-section">
<div class="row">
<div class="col-6">
<div class="col-6"><img class="img-fluid ib" src="images/ibimag.png" alt="IB"></div>
</div>
<div class="col-6 m-auto">
<h3 class="img-fluid"> IB Student, 12.th Grade</h3>
</div>
</div>
</header>
<!-- Photo Gallery -->
<section id="mywork">
<h3>My Work</h3>
<div class="continer-fluid">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<img src="images/1.png" alt="Certificate" class="basari">
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<img src="images/2.png" alt="Certificate" class="basari">
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<img src="images/3.jpg" alt="Certificate" class="basari">
</div>
</div>
<div class="row paddingekle">
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<img src="images/1.png" alt="Certificate" class="basari">
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<img src="images/5.png" alt="Certificate" class="basari">
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<img src="images/6.jpg" alt="Certificate" class="basari">
</div>
</div>
</div>
</section>
<!-- Resume -->
<section id="resume">
<h3>My Resume</h3>
<button class="btn btn-lg btn-light">
<a href="images/Bati's+Resume+(4).pdf" class="pdf"><i class="far fa-file-pdf"></i> Download</a>
</button>
</section>
<!-- Bootsrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
</body>
</html>CSS：
body {
background-color: #CDF0EA;
font-family: 'Montserrat', sans-serif;
}
.ib-section {
margin: 60px 0;
}
.ib {
max-width: 200px;
}
.name {
font-family: 'Great Vibes', cursive;
font-size: 4.8rem;
letter-spacing: 0.3px;
}
.caption {
font-size: 1.4rem;
letter-spacing: 0.8px;
}
.myimage {
max-width: 18%;
border-radius: 14%;
}
.navbar-brand,
.nav-link {
color: #555555;
}
.navbar-brand {
margin-left: 10px;
}
.navbar-brand:hover,
.nav-link:hover {
color: black;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2022-10-03 06:59:55
因为您希望将这些元素紧密分组，所以将它们嵌套在同一个父元素中并仅在该父元素上使用flex是有意义的。
不要将它们放在两个不同的.col中。试着将它们放在相同的一个中，并在父类上使用.d-flex和.align-items-center和.justify-content-center类。然后，您可以在这两个元素之前使用.gap-3来表示gap的1rem。
body {
background-color: #CDF0EA;
font-family: 'Montserrat', sans-serif;
}
.ib-section {
margin: 60px 0;
}
.ib {
max-width: 200px;
}
.name {
font-family: 'Great Vibes', cursive;
font-size: 4.8rem;
letter-spacing: 0.3px;
}
.caption {
font-size: 1.4rem;
letter-spacing: 0.8px;
}
.myimage {
max-width: 18%;
border-radius: 14%;
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Explanation !!!!!!!!I HAVE PROBLEM HERE!!!!!!!!-->
<div class="container-fluid text-center mt-3">
<div class="row justify-content-center">
<div class="col-12">
<img src="https://dummyimage.com/100/000/fff" alt="My Picture" class="img-fluid myimage">
<h1 class="name mt-4 mb-3">Batı Gözen</h1>
<p class="caption">"Web Developer, Mix&Masterig Specialist"</p>
</div>
</div>
</div>
<div class="container-fluid text-center ib-section">
<div class="row">
<div class="col-12 d-flex align-items-center justify-content-center gap-3">
<img class="img-fluid ib" src="https://dummyimage.com/100/000/fff" alt="IB">
<h3 class="img-fluid"> IB Student, 12.th Grade</h3>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73937058
复制相关文章
相似问题
腾讯云开发者
