我正在使用Bootstrap和React创建日历，遇到了日历设计的问题。包含工作日名称的最上面一行的文本与日历中的“day”项稍微偏离中心，后者最终将由数字而不是“day”表示。
稍微玩弄一下，我发现它与实际文本的长度有关，但我似乎不知道如何解决这个问题并将所有内容完美地排列起来。
代码如下：
.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>有什么想法吗？
最佳答案
由于您在这里使用的是<p>它根据文本内部的宽度，文本在各自的<p>中居中对齐，但是由于所有的<p>都有不同的宽度，因此它们看起来不对齐。如果你用桌子的话就不会这样了。
您可以为所有<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>