Question

我正在尝试获取5个宽度不同的引导程序列，它们以页面为中心。我敢肯定，尤其是对于新的flex / grid来说，这是有可能的，但是我一定会缺少一些东西。这是来自FF检查员的图像。

问题在于蓝色的正确位置。它显然比蓝色的左侧长。其他所有东西看起来都是对称的。

这是我的Bootstrap HTML创建的布局。

Total allocation count: 297 (12592 B)
Leak detected 02BB3DC0 size 64 B
  00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 E8 03 00 00 00 00 00 00 00 00 00 00 00 00 00 00 | ????????????????????????????????
  00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 | ????????????????????????????????
Stack trace when the memory block was allocated:
  $00406E76 - LeakCheckMemLeak.exe - System.AllocMem + $A (4562 +25)
  $004C4A53 - LeakCheckMemLeak.exe - System.Classes.TThread.WaitFor + $8F (15565 +23)
  $005E4EB0 - LeakCheckMemLeak.exe - LeakCheckMemLeak.DetectLeak + $34 (24 +3)
  $005ED5B9 - LeakCheckMemLeak.exe - LeakCheckMemLeak.LeakCheckMemLeak + $29 (35 +3)
  $763E343D - kernel32.dll
  $76F19832 - ntdll.dll

我认为这与<div class="row"> <div id="copyDateText" class="row col-sm-8 offset-sm-2 mx-auto text-center"> <div class="col-sm-auto"> About Us </div> <div class="col-sm-auto"> Site Map </div> <div class="col-sm-auto"> View our Privacy & Terms </div> <div class="col-sm-auto"> Security </div> <div class="col-sm-auto"> <span style="vertical-align:top;">©2005-$date.get('yyyy') Company, Inc. All Rights Reserved.</span> </div> </div>有关。但是我不确定如何以其他方式使内容居中。

Answer 1

好吧，可以通过flex框轻松地对其进行纠正，下面提供了工作示例，只需将其复制并粘贴到.html文件中就可以了

<!DOCTYPE html>
<!-- This is the program written to flatten the array using Javascript and HTML5 -->
<html lang="en-us">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
</head>

<body>
    <div class="row">
        <div id="copyDateText" class="col-sm-8 d-flex justify-content-center mx-auto offset-sm-2 row text-center">
            <div class="col-sm-auto">
                About Us
            </div>
            <div class="col-sm-auto">
                Site Map
            </div>
            <div class="col-sm-auto">
                View our Privacy & Terms
            </div>
            <div class="col-sm-auto">
                Security
            </div>
            <div class="col-sm-auto">
                <span style="vertical-align:top;">&copy;2005-$date.get('yyyy') Company, Inc. All Rights Reserved.</span>
            </div>
        </div>
</body>

</html>

如您所见，我只添加了两个类 d-flex 和 justify-content-center ，它将解决问题，如果您还有其他问题然后让我知道。

Answer 2

在#copyDateText div中添加另一行，然后在该行上使用margin：auto。

您的HTML将如下所示（可能需要全角显示整个菜单）：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
  <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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
  <div id="copyDateText" class="row col-sm-8 offset-sm-2 mx-auto text-center">
    <div class="row" style="margin:auto;">
      <div class="col-sm-auto">
        About Us
      </div>
      <div class="col-sm-auto">
        Site Map
      </div>
      <div class="col-sm-auto">
        View our Privacy & Terms
      </div>
      <div class="col-sm-auto">
        Security
      </div>
      <div class="col-sm-auto">
        <span style="vertical-align:top;">&copy;2005-$date.get('yyyy') Company, Inc. All Rights Reserved.</span>
      </div>
    </div>
</body>
</html>

当然，此后，将内联CSS添加到样式表中。

引导程序-将不同宽度的多列居中

2 个答案: