英文:
How do I center the content in the middle of the section?
问题
我正在尝试使每个部分的内容居中。我应该如何做到这一点?我是否正确使用了容器/行?我应该将对齐放在哪里?在部分中?容器中?行中?当我尝试时,都不起作用。
.content {
height: 100vh;
}
您正在使用Bootstrap 5.3.0-alpha1版本。在您的代码中,内容部分的内容是使用Bootstrap的网格系统构建的。要使每个部分的内容居中,您可以在row
元素上应用Bootstrap的justify-content-center
类,如下所示:
<div class="row justify-content-center">
这将使row
中的内容在水平方向上居中对齐。您可以在每个section
中的row
上都应用这个类,以使它们的内容都居中对齐。这应该解决您的居中对齐问题。
希望这可以帮助您解决问题!
英文:
I'm trying to make each sections content centered. How do I do this? Am I using the containers/rows right? Do I put the alignment in the section? the container? the row? I don't know and neither works when I try
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.content {
height: 100vh;
}
<!-- language: lang-html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}" />
</head>
<body>
<section class="content" style="background-color: lightgreen;">
<div class="container">
<div class="row">
<div class="col-lg-6 text-center text-lg-start">
<h1>heading</h1>
<p>test</p>
</div>
<div class="col-lg-6">
<img src="https://via.placeholder.com/200/09f/fff.png" />
</div>
</div>
</div>
</section>
<section class="content" style="background-color: moccasin;">
<div class="container">
<div class="row">
<div class="col-lg-10 mx-auto col-lg-5">
<h1>heading</h1>
<p>test</p>
</div>
<div class="col-lg-6">
<img src="https://via.placeholder.com/200/09f/fff.png" />
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
<!-- end snippet -->
using bootstrap v5.3.0-alpha1
edit: clarified question
答案1
得分: 2
这是您提供的HTML代码部分,无需进行翻译。
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}" />
</head>
<body>
<section class="content" style="background-color: lightgreen;">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 text-center text-lg-start">
<h1>heading</h1>
<p>test</p>
</div>
<div class="col-lg-6">
<img src="https://via.placeholder.com/500/09f/fff.png" />
</div>
</div>
</div>
</section>
<section class="content" style="background-color: moccasin;">
<div class="container">
<div class="row justify-center text-center">
<div class="col-lg-10 mx-auto col-lg-5">
<h1>heading</h1>
<p>test</p>
</div>
<div class="col-lg-6 m-auto">
<img src="https://via.placeholder.com/500/09f/fff.png" />
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
<!-- end snippet -->
答案2
得分: 0
根据我检查您的代码片段,我发现您已将部分高度设置为100vh,而图像高度大于此值,因此图像重叠到其他部分。要消除重叠,您需要将部分高度设置为大于内部图像元素,或者您可以删除应用于部分的内容类的内联高度。要使部分内容居中对齐,请在内容类或容器类中使用text-center
类,否则您将不得不为每个元素编写它。
<section class="content" style="background-color: lightgreen;">
<div class="container text-center">
<div class="row">
<div class="col-lg-6 text-lg-start">
<h1>标题</h1>
<p>测试</p>
</div>
<div class="col-lg-6">
<img src="https://via.placeholder.com/500/09f/fff.png" />
</div>
</div>
</div>
</section>
<section class="content" style="background-color: moccasin;">
<div class="container text-center">
<div class="row">
<div class="col-lg-10 mx-auto col-lg-5">
<h1>标题</h1>
<p>测试</p>
</div>
<div class="col-lg-6">
<img src="https://via.placeholder.com/500/09f/fff.png" />
</div>
</div>
</div>
</section>
请注意,我只翻译了代码部分,没有添加额外内容。
英文:
As I have checked your snippet, I have found that you have set the section height 100vh and your Image height is greater than it, So Image is overlapping to other section. To remove overlapping, You need to set section height greater than inside image element or You can remove the inline height of content class which applied on section. And to align section content in middle. Use class text-center
with content class or container class otherwise you will have to write it with each element
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}" />
</head>
<body>
<section class="content" style="background-color: lightgreen;">
<div class="container text-center">
<div class="row">
<div class="col-lg-6 text-lg-start">
<h1>heading</h1>
<p>test</p>
</div>
<div class="col-lg-6">
<img src="https://via.placeholder.com/500/09f/fff.png" />
</div>
</div>
</div>
</section>
<section class="content" style="background-color: moccasin;">
<div class="container text-center">
<div class="row">
<div class="col-lg-10 mx-auto col-lg-5">
<h1>heading</h1>
<p>test</p>
</div>
<div class="col-lg-6">
<img src="https://via.placeholder.com/500/09f/fff.png" />
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论