文字稍微偏离中心

时间：2017-08-01 19:19:17

标签： html css twitter-bootstrap reactjs flexbox

我正在使用Bootstrap和React创建日历，并且遇到了日历设计的问题。包含工作日名称的第一行的文字稍微偏离了中心＆＃34; day＆＃34;日历中的项目最终将由数字代替而不是单词＆＃34; day＆＃34;。

稍微讨论一下，我能够发现它与实际文本的长度有关，但我似乎无法弄清楚如何解决问题并完美排列所有内容。 / p>

以下是代码：

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

对此的想法？

3 个答案:

答案 0 :(得分：2)

由于您在此使用<p>，因此根据其中的文字占据宽度，文字会在各自的<p>中间对齐，但由于所有<p>的宽度都不同，因此它们显示未对齐。如果您使用过表，则不会出现这种情况。 您可以为所有<p>修改宽度。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

虽然我想知道你为什么不使用实际的表，如果你想将信息显示为带有你已经拥有的标记的表，你可以这样做，它将修复对齐问题。

主要风格：

.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;
}

看到它的实际效果：

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

工作日标题与下面的列没有排列的原因是因为它们是两个独立的DOM元素，彼此没有关系（除了<div> s彼此排列的框模型定位之外）。

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

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

另一个想法是在所有列上设置min-width。这样，内容将与每个＆＃34;单元格中的中心对齐。它的宽度与它下面的单元格的宽度相同。

相关问题
最新问题