如何将内容居中放置在部分中间？

huangapple
go评论55阅读模式
英文:

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 -->

&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
        &lt;title&gt;Test&lt;/title&gt;

        &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD&quot; crossorigin=&quot;anonymous&quot;&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;{{ url_for(&#39;static&#39;, filename=&#39;css/index.css&#39;) }}&quot; /&gt;
    &lt;/head&gt;
    &lt;body&gt;
            &lt;section class=&quot;content&quot; style=&quot;background-color: lightgreen;&quot;&gt;
            &lt;div class=&quot;container&quot;&gt;
                &lt;div class=&quot;row&quot;&gt;
                    &lt;div class=&quot;col-lg-6 text-center text-lg-start&quot;&gt;
                        &lt;h1&gt;heading&lt;/h1&gt;
                        &lt;p&gt;test&lt;/p&gt;
                    &lt;/div&gt;
    
                    &lt;div class=&quot;col-lg-6&quot;&gt;
                        &lt;img src=&quot;https://via.placeholder.com/200/09f/fff.png&quot; /&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/section&gt;

        &lt;section class=&quot;content&quot; style=&quot;background-color: moccasin;&quot;&gt;
            &lt;div class=&quot;container&quot;&gt;
                &lt;div class=&quot;row&quot;&gt;
                    &lt;div class=&quot;col-lg-10 mx-auto col-lg-5&quot;&gt;
                        &lt;h1&gt;heading&lt;/h1&gt;
                        &lt;p&gt;test&lt;/p&gt;
                    &lt;/div&gt;
    
                    &lt;div class=&quot;col-lg-6&quot;&gt;
                        &lt;img src=&quot;https://via.placeholder.com/200/09f/fff.png&quot; /&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/section&gt;
                &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;

<!-- 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 -->

&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
&lt;title&gt;Test&lt;/title&gt;

&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;{{ url_for(&#39;static&#39;, filename=&#39;css/index.css&#39;) }}&quot; /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;section class=&quot;content&quot; style=&quot;background-color: lightgreen;&quot;&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;row align-items-center&quot;&gt;
    &lt;div class=&quot;col-lg-6 text-center text-lg-start&quot;&gt;
        &lt;h1&gt;heading&lt;/h1&gt;
        &lt;p&gt;test&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class=&quot;col-lg-6&quot;&gt;
        &lt;img src=&quot;https://via.placeholder.com/500/09f/fff.png&quot; /&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;

&lt;section class=&quot;content&quot; style=&quot;background-color: moccasin;&quot;&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;row justify-center text-center&quot;&gt;
    &lt;div class=&quot;col-lg-10 mx-auto col-lg-5&quot;&gt;
        &lt;h1&gt;heading&lt;/h1&gt;
        &lt;p&gt;test&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class=&quot;col-lg-6 m-auto&quot;&gt;
        &lt;img src=&quot;https://via.placeholder.com/500/09f/fff.png&quot; /&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;

<!-- 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 -->

&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
        &lt;title&gt;Test&lt;/title&gt;

        &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD&quot; crossorigin=&quot;anonymous&quot;&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;{{ url_for(&#39;static&#39;, filename=&#39;css/index.css&#39;) }}&quot; /&gt;
    &lt;/head&gt;
    &lt;body&gt;
            &lt;section class=&quot;content&quot; style=&quot;background-color: lightgreen;&quot;&gt;
            &lt;div class=&quot;container text-center&quot;&gt;
                &lt;div class=&quot;row&quot;&gt;
                    &lt;div class=&quot;col-lg-6 text-lg-start&quot;&gt;
                        &lt;h1&gt;heading&lt;/h1&gt;
                        &lt;p&gt;test&lt;/p&gt;
                    &lt;/div&gt;
    
                    &lt;div class=&quot;col-lg-6&quot;&gt;
                        &lt;img src=&quot;https://via.placeholder.com/500/09f/fff.png&quot; /&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/section&gt;

        &lt;section class=&quot;content&quot; style=&quot;background-color: moccasin;&quot;&gt;
            &lt;div class=&quot;container text-center&quot;&gt;
                &lt;div class=&quot;row&quot;&gt;
                    &lt;div class=&quot;col-lg-10  mx-auto col-lg-5&quot;&gt;
                        &lt;h1&gt;heading&lt;/h1&gt;
                        &lt;p&gt;test&lt;/p&gt;
                    &lt;/div&gt;
    
                    &lt;div class=&quot;col-lg-6&quot;&gt;
                        &lt;img src=&quot;https://via.placeholder.com/500/09f/fff.png&quot; /&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/section&gt;
                &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月6日 12:36:37
  • 转载请务必保留本文链接：https://go.coder-hub.com/75357379.html
  • bootstrap-5
  • css
  • html
  • twitter-bootstrap
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定