web-dev-qa-db-fra.com

Alignement du texte: centre et éléments alignés: le centre ne fonctionne pas horizontalement

Cela n'a jamais été le cas pour moi auparavant. J'ai essayé text-align: center sur toutes sortes d'endroits et ils ne fonctionnent pas tous. Ils travaillent verticalement, mais pas horizontalement. J'essaie de le faire fonctionner horizontalement et verticalement pour chaque case.

Ceci est mon code: 

.boxes {
  height:100%;
}
.box {
  width: 33%;
  height: 20%;
  display: -webkit-flex;
}
.box p {
  display: flex;
  align-items: center;
}
.box1 {
  background: Magenta; 
}
.box2 {
  background: cyan;
}
.box3 {
  background: yellow;
}
.box4 {
  background: orange;
}
.box5 {
  background: purple;
}
* { 
  margin:0;
  padding:0;
}
html, body {
  height: 100%; 
}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="tabletest.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="boxes">
      <div class="box box1"><p>Box 1</p></div>
      <div class="box box2"><p>Box 2</p></div>
      <div class="box box3"><p>Box 3</p></div>
      <div class="box box4"><p>Box 4</p></div>
      <div class="box box5"><p>Box 5</p></div>
    </div>
  </body>
</html>

J'essaie également de respecter le pourcentage pour avoir un design réactif.

EDIT: Cela peut sembler être un doublon vers un autre message, mais ma question est de savoir comment aligner les textes directement au centre (à la fois verticalement et horizontalement) tout en conservant l'ordre des cases.

htmlcssresponsive-designflexbox
8
m_cht

Vous pouvez utiliser la solution suivante en utilisant flexbox:

.boxes {
  height:100%;
}
.box {
  width:33%;
  height:20%;  
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.box1 {
  background: Magenta; 
}
.box2 { 
  background: cyan;
}
.box3 {
  background: yellow;
}
.box4 {
  background: orange;
}
.box5 { 
  background: purple;
}
* { 
  margin:0;
  padding:0;
}
html, body {
  height: 100%; 
}
<div class="boxes">
  <div class="box box1"><p>Box 1</p></div>
  <div class="box box2"><p>Box 2</p></div>
  <div class="box box3"><p>Box 3</p></div>
  <div class="box box4"><p>Box 4</p></div>
  <div class="box box5"><p>Box 5</p></div>
</div>

14
Sebastian Brosch

Utilisez ceci:

 .box p {
    align-items: center;
    display: block;
    text-align: center;
    width: 100%;
}
1
Prodip Das

Essayez les options suivantes

.boxes {
height:100%;
}
.box {
  width: 33%;
  height: 20%;
}
.box p {
  text-align: center;
}
.box1 {
  background: Magenta; 
}
.box2 {
  background: cyan;
}
.box3 {
  background: yellow;
}
.box4 {
  background: orange;
}
.box5 {
  background: purple;
}
* { 
  margin:0;
  padding:0;
}
html, body {
  height: 100%; 
}

Note: J'ai utilisé text-align au lieu d'align-items

1
dhaveed

Définissez justification-contenu: centre; sur la classe de la boîte. 

0
DeveloperDahak

Essaye ça.

.boxes {
  height:100%;
}
.box {
  width: 33%;
  height: 20%;
  display: -webkit-flex;
  position: relative;
}
.box p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.box1 {
  background: Magenta; 
}
.box2 {
  background: cyan;
}
.box3 {
  background: yellow;
}
.box4 {
  background: orange;
}
.box5 {
  background: purple;
}
* { 
  margin:0;
  padding:0;
}
html, body {
  height: 100%; 
}
0
Hezron