为什么项目没有垂直居中对齐?

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

Why aren't the items lining up vertically centered?

问题

我想要将我的图像和文本垂直居中对齐。
一个接一个地放在新行中。
具体来说,在左侧,有图像、文本1和文本2
理想情况下应该是

 |       图像      |

 |       文本1      |

 |       文本2      |

在垂直和水平方向上都居中对齐

实现代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
  <!-- Custom styles for this template -->
  <link href="./index.css" rel="stylesheet" />
  <title>Login</title>
</head>

<body>
  <div class="container-fluid ps-md-0">
    <div class="row g-0">
      <div class="col-md-4 col-lg-6 left-side">
        <div class="d-flex align-items-center justify-content-center text-center">
          <img src="../pictures/logo.png" alt="" width="72" height="72" />
          <h1>文本1</h1>
          <h3>文本2</h3>
        </div>
      </div>

      <div class="col-md-8 col-lg-6">
        <div class="login d-flex align-items-center py-5">
          <div class="container">
            <div class="row">
              <div class="col-md-9 col-lg-8 mx-auto">
                <h3 class="login-heading mb-4">Welcome back!</h3>
                <!-- Sign In Form -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

希望这能帮助你实现你想要的效果。

英文:

I want to line up my image and texts vertically centered.
One after another in a new line.
Specifically the left side, where there is image, text1, and text2
Ideally it would be

 |       Image      |
|       text1      |
|       text2      |

all centered vertically and horizontally

Implementation:

<!-- 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;!-- Required meta tags --&gt;
&lt;meta charset=&quot;utf-8&quot; /&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot; /&gt;
&lt;!-- Bootstrap CSS --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css&quot; integrity=&quot;sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T&quot; crossorigin=&quot;anonymous&quot; /&gt;
&lt;!-- Custom styles for this template --&gt;
&lt;link href=&quot;./index.css&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;title&gt;Login&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;container-fluid ps-md-0&quot;&gt;
&lt;div class=&quot;row g-0&quot;&gt;
&lt;div class=&quot;col-md-4 col-lg-6 left-side&quot;&gt;
&lt;div class=&quot;d-flex align-items-center justify-content-center text-center&quot;&gt;
&lt;img src=&quot;../pictures/logo.png&quot; alt=&quot;&quot; width=&quot;72&quot; height=&quot;72&quot; /&gt;
&lt;h1&gt;text1&lt;/h1&gt;
&lt;h3&gt;text2&lt;/h3&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col-md-8 col-lg-6&quot;&gt;
&lt;div class=&quot;login d-flex align-items-center py-5&quot;&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-md-9 col-lg-8 mx-auto&quot;&gt;
&lt;h3 class=&quot;login-heading mb-4&quot;&gt;Welcome back!&lt;/h3&gt;
&lt;!-- Sign In Form --&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.slim.min.js&quot; integrity=&quot;sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js&quot; integrity=&quot;sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js&quot; integrity=&quot;sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

<!-- end snippet -->

答案1

得分: 1

在包含所有元素的父容器的父容器上添加 d-flexjustify-content-center。然后在所有元素的父容器上添加 text-center

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
        <!-- Custom styles for this template -->
        <link href="./index.css" rel="stylesheet" />
        <title>Login</title>
    </head>

    <body>
        <div class="container-fluid ps-md-0">
            <div class="row g-0">
                <div class="col-md-4 col-lg-6 left-side d-flex justify-content-center">
                    <div class="text-center">
                        <img src="https://via.placeholder.com/500x500.png" alt="" width="72" height="72" />
                        <h1>Text</h1>
                        <h3>Text</h3>
                    </div>
                </div>

                <div class="col-md-8 col-lg-6">
                    <div class="login d-flex align-items-center py-5">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-9 col-lg-8 mx-auto">
                                    <h3 class="login-heading mb-4">Welcome back!</h3>
                                    <!-- Sign In Form -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

了解更多关于 Bootstrap FlexBootstrap Utilities Spacing 的信息。

英文:

Add d-flex and justify-content-center to the parent container of the parent container that contains all elements. Then add text-center to the parent container of all elements.

<!-- 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;!-- Required meta tags --&gt;
&lt;meta charset=&quot;utf-8&quot; /&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot; /&gt;
&lt;!-- Bootstrap CSS --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css&quot; /&gt;
&lt;!-- Custom styles for this template --&gt;
&lt;link href=&quot;./index.css&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;title&gt;Login&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;container-fluid ps-md-0&quot;&gt;
&lt;div class=&quot;row g-0&quot;&gt;
&lt;div class=&quot;col-md-4 col-lg-6 left-side d-flex justify-content-center&quot;&gt;
&lt;div class=&quot;text-center&quot;&gt;
&lt;img src=&quot;https://via.placeholder.com/500x500.png&quot; alt=&quot;&quot; width=&quot;72&quot; height=&quot;72&quot; /&gt;
&lt;h1&gt;Text&lt;/h1&gt;
&lt;h3&gt;Text&lt;/h3&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col-md-8 col-lg-6&quot;&gt;
&lt;div class=&quot;login d-flex align-items-center py-5&quot;&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-md-9 col-lg-8 mx-auto&quot;&gt;
&lt;h3 class=&quot;login-heading mb-4&quot;&gt;Welcome back!&lt;/h3&gt;
&lt;!-- Sign In Form --&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

<!-- end snippet -->

Learn more about Bootstrap Flex and Bootstrap Utilities Spacing.

答案2

得分: 0

为了将图像和文本堆叠在一起,请使用d-flexflex-direction-column将每个div堆叠在一起。因为轴从水平变为垂直,所以使用align-items-center来使文本居中。

要使其垂直显示,同样使用d-flexalign-items-center,但将div设置为与父元素相同的高度,使用h-100。我已经人为增加了body元素的大小,因为它会根据内容而缩小,否则会导致问题。标记如下。您可能需要在代码片段上全屏查看示例效果。

另外,我建议避免使用HTML属性调整图像大小,最好使用CSS。

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->
body {
  height: 80vh;
}

<!-- language: lang-html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<div class="col-md-4 col-lg-6 left-side h-100 d-flex align-items-center">
  <div class="d-flex flex-column align-items-center">
    <img src="https://placekitten.com/200/200" alt="" width="72" height="72" />
    <h1>text1</h1>
    <h3>text2</h3>
  </div>
</div>

<!-- end snippet -->

以上是您提供的代码的翻译部分。

英文:

To stack the image and text on top of each other, use d-flex and flex-direction-column to make each div go on top of each other. Because the axis has changed from horizontal to vertical, use align-items-center to center the text.

To make it appear vertically, similarly use d-flex and align-items-center but set the div to the height of the parent with h-100. I've artificially increased the size of the body element as it'll shrink to the content, otherwise. Mark up below. You may need to go full screen on the snippet to see the example work

P.S. I'd avoid sizing images with html attributes. Better to use CSS these days.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

body {
height: 80vh;
}

<!-- language: lang-html -->

&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css&quot; integrity=&quot;sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T&quot; crossorigin=&quot;anonymous&quot; /&gt;
&lt;div class=&quot;col-md-4 col-lg-6 left-side h-100 d-flex align-items-center&quot;&gt;
&lt;div class=&quot;d-flex flex-column align-items-center&quot;&gt;
&lt;img src=&quot;https://placekitten.com/200/200&quot; alt=&quot;&quot; width=&quot;72&quot; height=&quot;72&quot; /&gt;
&lt;h1&gt;text1&lt;/h1&gt;
&lt;h3&gt;text2&lt;/h3&gt;
&lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

答案3

得分: 0

flex-direction: column添加到具有类名.d-flex的父容器中
(或者使用一个将flex-direction设置为column的Bootstrap类)。

此外,我注意到你在你的CSS中有很多!important
最好的做法是尽量消除尽可能多的!important实例。

祝你好运!

英文:

Add flex-direction:column to the parent container with class .d-flex
(or use a bootstrap class that sets flex-direction to column)

Additionally, I noticed you have a lot of !important in your CSS.
It is good practice to eliminate as many instances of !important as possible.

Best of luck to you!

huangapple
  • 本文由 发表于 2023年6月13日 00:29:27
  • 转载请务必保留本文链接:https://go.coder-hub.com/76458600.html
匿名

发表评论

匿名网友

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

确定