我正在使用 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>对此有何想法？
最佳答案
由于您正在使用<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>关于html - 文字稍微偏离中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45446035/