文字稍微偏离中心答案

【问题标题】：Text slightly off center文字稍微偏离中心
【发布时间】：2018-01-08 19:19:46
【问题描述】：

我正在使用 Bootstrap 和 React 创建日历，但遇到了日历设计问题。包含工作日名称的顶行文本与日历中的“日”项目稍有偏离中心，这些项目最终将由数字而不是“日”一词表示。

玩弄了一下，我发现它与实际文本的长度有关，但我似乎无法弄清楚如何解决问题并将所有内容完美排列。

代码如下：

.calendar {
  text-align: center;
}

.calendar--weekdays li {
  padding: 5px 20px;
}

.calendar--week li {
  padding: 5px 20px;
}

.calendar--row {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.calendar--row p {
  padding: 10px 15px;
  margin: 0px;
}

.event__viewer {
  text-align: center;
}

<head>
  <!--  Font Awesome  -->
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
  <div id="container" class="container">
    <div class="row">
      <div class="col-lg-6">
        <div class="calendar">
          <h1>My Calendar</h1>
          <div class="calendar">
            <div class="calendar--row calendar--weekdays">
              <p>Sun</p>
              <p>Mon</p>
              <p>Tue</p>
              <p>Wed</p>
              <p>Thur</p>
              <p>Fri</p>
              <p>Sat</p>
            </div>
            <div class="calendar--row calendar--week">
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
            </div>
            <div class="calendar--row calendar--week">
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
            </div>
            <div class="calendar--row calendar--week">
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
            </div>
            <div class="calendar--row calendar--week">
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
            </div>
            <div class="calendar--row calendar--week">
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
            </div>
            <div class="calendar--row calendar--week">
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
            </div>
          </div>
          <div class="calendar--tools">
            <i class="fa fa-arrow-left" aria-hidden="true"></i>
            <span> Month </span>
            <i class="fa fa-arrow-right" aria-hidden="true"></i>
          </div>
        </div>
      </div>
      <div class="col-lg-6 event__viewer">
        <h1>Events</h1>
      </div>
    </div>
  </div>
</body>

对此有什么想法？

【问题讨论】：

这可能与星期缩写中的某些大写字符占用更多水平空间有关，因此它们的容器会对齐，但文本本身不会.

标签： html css twitter-bootstrap reactjs flexbox

【解决方案1】：

由于您在此处使用<p>，因此它根据其中的文本获取宽度，因此文本在各自的<p> 中居中对齐，但由于所有<p> 的宽度不同，因此它们看起来未对齐。如果您使用的是 table，就不会出现这种情况。您可以为所有 <p> 固定宽度。

.calendar {
  text-align: center;
}

.calendar--weekdays li {
  padding: 5px 20px;
}

.calendar--week li {
  padding: 5px 20px;
}

.calendar--row {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.calendar--row p {
  padding: 10px 15px;
  margin: 0px;
  width: 30px
}

.event__viewer {
  text-align: center;
}

<head>
  <!--  Font Awesome  -->
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
  <div id="container" class="container">
    <div class="row">
      <div class="col-lg-6">
        <div class="calendar">
          <h1>My Calendar</h1>
          <div class="calendar">
            <div class="calendar--row calendar--weekdays">
              <p>Sun</p>
              <p>Mon</p>
              <p>Tue</p>
              <p>Wed</p>
              <p>Thur</p>
              <p>Fri</p>
              <p>Sat</p>
            </div>
            <div class="calendar--row calendar--week">
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
            </div>
            <div class="calendar--row calendar--week">
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
            </div>
            <div class="calendar--row calendar--week">
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
            </div>
            <div class="calendar--row calendar--week">
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
            </div>
            <div class="calendar--row calendar--week">
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
            </div>
            <div class="calendar--row calendar--week">
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
            </div>
          </div>
          <div class="calendar--tools">
            <i class="fa fa-arrow-left" aria-hidden="true"></i>
            <span> Month </span>
            <i class="fa fa-arrow-right" aria-hidden="true"></i>
          </div>
        </div>
      </div>
      <div class="col-lg-6 event__viewer">
        <h1>Events</h1>
      </div>
    </div>
  </div>
</body>

【讨论】：

我将把它改写成一个表格，看看我们能用它做什么。我会回来报告的。提前感谢您的帮助！
切换到一张桌子效果很好。我的样式确实有一个奇怪的问题，text-align:center; 在<th> 上不起作用，除非我专门将它应用到标题而不是整个表格......但它仍然有效！

【解决方案2】：

虽然我想知道您为什么不使用实际表格，但如果您想将信息显示为带有已有标记的表格，您可以这样做，它会解决对齐问题。

主要样式：

.calendar {
  display: table;
  margin: 0 auto;
  caption-side: bottom;
}
.calendar--row {
  display: table-row-group;
}
.calendar--row p {
  display: table-cell;
}
.calendar--tools {
  display: table-caption;
}

查看实际操作：

.calendar {
  text-align: center;
  caption-side: bottom;
  display: table;
  margin: 0 auto;
}

.calendar--weekdays li {
  padding: 5px 20px;
}

.calendar--week li {
  padding: 5px 20px;
}

.calendar--row {
  display: table-row-group;
}

.calendar--row p {
  padding: 10px 15px;
  margin: 0px;
  display: table-cell;
}

.event__viewer {
  text-align: center;
}

.calendar--tools {
  display: table-caption;
}

<head>
  <!--  Font Awesome  -->
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
  <div id="container" class="container">
    <div class="row">
      <div class="col-lg-6">
        <div class="calendar">
          <h1>My Calendar</h1>
          <div class="calendar">
            <div class="calendar--row calendar--weekdays">
              <p>Sun</p>
              <p>Mon</p>
              <p>Tue</p>
              <p>Wed</p>
              <p>Thur</p>
              <p>Fri</p>
              <p>Sat</p>
            </div>
            <div class="calendar--row calendar--week">
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
            </div>
            <div class="calendar--row calendar--week">
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
            </div>
            <div class="calendar--row calendar--week">
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
            </div>
            <div class="calendar--row calendar--week">
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
            </div>
            <div class="calendar--row calendar--week">
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
            </div>
            <div class="calendar--row calendar--week">
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
              <p>day</p>
            </div>
          </div>
          <div class="calendar--tools">
            <i class="fa fa-arrow-left" aria-hidden="true"></i>
            <span> Month </span>
            <i class="fa fa-arrow-right" aria-hidden="true"></i>
          </div>
        </div>
      </div>
      <div class="col-lg-6 event__viewer">
        <h1>Events</h1>
      </div>
    </div>
  </div>
</body>

【讨论】：

【解决方案3】：

工作日标题与下面的列不对齐的原因是因为它们是两个独立的 DOM 元素，彼此没有关系（除了 <div>s 在彼此下方对齐的盒子模型定位）。

也就是说，所有行都与您指定的中心对齐。包含您的工作日标题的<p> 标记有一些填充，因此在居中该行时会考虑字符的水平宽度加上填充，它是居中的。您会注意到在该计算中没有参考它下面的周行。

关联行的一种方法是使用<table>，正如其他人所说的那样。关于不要将<table>s 用于布局目的，有一些非常可靠的建议。

另一个想法是在所有列上设置min-width。这样，内容将与每个“单元格”的中心对齐，该单元格的宽度与其下方的单元格相同。

【讨论】：