Question

美好的一天，

对于我的网站，我注意到我的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;
}

Answer 1

很明显，您的问题是有关正确使用bootstrap类来使该元素居中的（这就是我重新打开该问题的原因，因为列出的“重复项”仅显示了通用的CSS解决方案，而与Bootstrap无关。

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

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

，它将创建一个6/12（= 50％）宽的div，以offset类为中心。

有没有一种更好的方法来使元素水平居中？

1 个答案: