2 votes

Zach H avatar

Texte légèrement décentré

Demandé el 1 de Août, 2017
Quand la question a-t-elle été
618 affichage
Nombre de visites la question a
3 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

Je travaille sur la création d'un calendrier en utilisant Bootstrap et React et je rencontre un problème avec la conception du calendrier. Le texte de la ligne supérieure contenant les noms des jours de la semaine est légèrement décentré par rapport aux éléments "jour" du calendrier qui seront éventuellement représentés par des chiffres au lieu du mot "jour".

En jouant un peu avec ce problème, j'ai pu comprendre qu'il était lié à la longueur du texte, mais je n'arrive pas à trouver comment résoudre le problème et aligner tout parfaitement.

Voici le code :

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

Vous en pensez quoi ?

Demandé el 1 de Août, 2017 par Zach H

Réponses

Trop de publicités?

2voto

Dij avatar
Dij Points 9016

Puisque vous utilisez <p> ici il prend la largeur basée sur le texte à l'intérieur, le texte est aligné au centre dans leurs respectifs <p> mais comme tous les <p> ont une largeur différente, ils apparaissent mal alignés. Ce ne serait pas le cas si vous aviez utilisé le tableau. vous pouvez fixer une largeur pour tous <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>
Répondu el 1 de Août, 2017 par Dij (9016 Points )

1voto

cjl750 avatar
cjl750 Points 2348

Je me demande pourquoi vous n'utilisez pas un vrai tableau. Si vous voulez afficher les informations sous forme de tableau avec le balisage dont vous disposez déjà, vous pouvez le faire et cela résoudra le problème d'alignement.

Styles clés :

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

Voyez-le en action :

.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>
Répondu el 1 de Août, 2017 par cjl750 (2348 Points )

0voto

smilebomb avatar
smilebomb Points 1946

La raison pour laquelle les titres des jours de la semaine ne sont pas alignés avec les colonnes situées en dessous est qu'il s'agit de deux éléments DOM distincts sans relation l'un avec l'autre (à l'exception du positionnement du modèle de boîte où l'élément <div> s'alignent les uns sous les autres).

C'est-à-dire que toutes les lignes sont alignées au centre comme vous l'avez spécifié. Le site <p> Les balises qui contiennent les titres des jours de la semaine ont un peu de rembourrage, donc la largeur horizontale des caractères plus le padding sont pris en compte lors du centrage de cette ligne sur lequel il est centré. Vous remarquerez qu'il n'y a aucune référence aux lignes de la semaine situées en dessous dans ce calcul.

Une façon de mettre en relation les lignes est d'utiliser un fichier <table> comme d'autres l'ont dit. Il y a des conseils assez solides sur le fait de ne pas utiliser <table> à des fins de mise en page.

Une autre idée consiste à définir un min-width sur toutes les colonnes. De cette façon, le contenu s'alignera au centre de chaque "cellule", qui aura la même largeur que la cellule du dessous.

Répondu el 1 de Août, 2017 par smilebomb (1946 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X