2023年6月13日 00:29:27go评论73阅读模式

英文:

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:

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

答案1

得分: 1

在包含所有元素的父容器的父容器上添加 d-flex 和 justify-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 Flex 和 Bootstrap 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.

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

Learn more about Bootstrap Flex and Bootstrap Utilities Spacing.

答案2

得分: 0

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

要使其垂直显示，同样使用d-flex和align-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.

body {
height: 80vh;
}

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

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

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

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

问题

答案1

答案2

答案3

font-family规则：在本地字体名称中是否必须包括空格？

粘性元素重叠绝对定位元素

如何在我的Next图像组件加载时显示加载动画，当我已经放置了先前的图像？

如何在按钮上显示星期几？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论