有没有更好的方法将元素水平居中？ [复制]

Posted 2023-03-05

【中文标题】有没有更好的方法将元素水平居中？ [复制]

【英文标题】：Is there a better way to center horizontally an element? [duplicate]

【发布时间】：2020-06-13 09:02:22

【问题描述】：

早安，

对于我的网站，我注意到我的 div 框架没有在屏幕上理想地居中 - 这是我迄今为止在智能手机上还没有意识到的。

我正在考虑在我的 css 样式文件中自定义 margin 值 - 但也许这并不理想，因为我不知道我的用户的屏幕宽度。

你有什么建议让我的框架更好地水平居中，如下图所示？

非常感谢您的帮助。

  <div id="fh5co-event" class="fh5co-bg" style="background-image:url(images/img_bg_3.jpg);">
    <div class="overlay"></div>
    <div class="container">
      <div class="row">
        <div class="col-md-8 col-md-offset-2 text-center fh5co-heading animate-box">
          <span>Les dates-cl&eacute;</span>
          <h2>Wedding Events</h2>
        </div>
      </div>
      <div class="row">
        <div class="display-t">
          <div class="display-tc">
            <div class="col-md-10 col-md-offset-1">

              <div class="col-md-6 col-sm-6 text-center">
                <div class="event-wrap animate-box">
                  <h3>Party</h3>
                  <div class="event-col">
                    <i class="icon-calendar"></i>
                    <span>Samedi</span>
                    <span>18.07.2020</span>
                  </div>
                  <div class="event-col">
                    <i class="icon-clock"></i>
                    <span>15:00</span>
                    <span>01:00</span>
                  </div>
                  <p>Le lieu de r&eacute;ception sera r&eacute;v&eacute;l&eacute; d'ici au 15.03.2020.<br>En attendant, vous pouvez deviner o&ugrave; ce dernier aura lieu en participant au <a href="concours.html">concours</a></p>
                  <p>Dress code : glamour chic</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

CSS 代码：

#fh5co-counter .event-wrap h3, #fh5co-event .event-wrap h3 
font-size: 20px;
color: #fff;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
display: block;
padding-bottom: 20px;
text-transform: uppercase;
letter-spacing: 2px;


h1, h2, h3, h4, h5, h6, figure 
font-family: "Work Sans", Arial, sans-serif;
font-weight: 400;
margin: 0 0 20px 0;

【问题讨论】：

我重新打开了这个问题，因为 OP 显然正在寻找一种特定于引导程序的解决方案来进行居中，即为其使用引导程序类。

【参考方案1】：

显然，您的问题是关于正确使用引导类以使该元素居中（这就是我重新提出问题的原因，因为列出的“重复项”仅显示了通用 CSS 解决方案，而与引导程序无关。

我想知道这些 .display-t 和 .display-tc 应该做什么 - 这些不是默认的引导类。你没有添加任何关于那些（？）的CSS。我会删除这些级别/容器。在这两个之后，您有两个打开的divs，其中包含您的框，如下所示：

<div class="col-md-10 col-md-offset-1">
    <div class="col-md-6 col-sm-6 text-center">

第一个是合乎逻辑的，但第二个不是。我会改为（即同时替换两者）使用

<div class="col-md-6 col-sm-6 col-md-offset-3 text-center">

，它应该创建一个以 offset 类为中心的 6/12 (= 50%) 宽的 div。

【讨论】：

您可以编辑副本而不是重新打开，因为其中有很多处理引导程序中心

但在这种情况下链接到一个通用答案与告诉 OP 去阅读手册一样“好”...... - 这是关于这个问题中的特定代码