Wyrównanie tekstu: środek i elementy wyrównania: centrum nie działa w poziomie

To nigdy wcześniej nie miało miejsca. Próbowałem text-align: center w różnych miejscach i wszystkie nie działają. Działają pionowo, ale nie działają w poziomie. Próbuję go uruchomić zarówno poziomo, jak i pionowo dla każdego pudełka.Wyrównanie tekstu: środek i elementy wyrównania: centrum nie działa w poziomie

To jest mój kod:

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

jestem również stara się trzymać procentach mieć elastycznego projektowania.

EDYCJA: Może się wydawać, że jest to duplikat do innego postu, ale moim pytaniem jest tutaj, w jaki sposób uzyskać wyrównanie tekstów bezpośrednio w środku (zarówno w pionie, jak iw poziomie), zachowując kolejność pól.

Źródło

2017-01-03 m_cht

Potrzebujesz kolorów, aby wypełnić stronę tekstem w środku? –

Leo the Lion, w odniesieniu do możliwego duplikatu, ten post pytał o to, jak możesz rozmieścić klocki w pionie, ale moje pytanie brzmi: w jaki sposób mogę ustawić tekst wyrównany w środku pola, ponieważ moje zwykłe rozwiązanie nie działa . Nie widzę, jak to jest podobne. –

Deepak, kolory niekoniecznie muszą wypełniać stronę, ale chcę, aby tekst znajdował się w środku pól. –

można wykorzystywać następujące rozwiązanie, za pomocą schematu 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>

Źródło

2017-01-03 07:53:45

Byłoby pomocne, gdybyś wyjaśnił, dlaczego przedstawiony kod rozwiązuje problem PO. – cstricklan

Set-uzasadniać treści: center; w klasie pudełkowej.

Źródło

2017-01-03 07:54:42 DeveloperDahak

Użyj tego:

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

Źródło

2017-01-03 07:55:28

Wypróbuj poniższe opcje

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

Uwaga: użyłem text-align insted ALIGN-przedmioty

Źródło

2017-01-03 07:59:00 dhaveed

Dziękuję, ale szukam zarówno pionowego, jak i poziomego wyrównania środka, podczas gdy wyrównanie tekstu daje tylko poziome wyrównanie do środka. Jednak znalazłem odpowiedź na moją odpowiedź. –

Spróbuj tego.

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

Źródło

2017-01-03 07:59:22 Hezron

Dzięki, ale wygląda na to, że nie działa. To pokazuje: http://imgur.com/a/cBKlc. Jednak znalazłem odpowiedź na moje pytanie. –

Wyrównanie tekstu: środek i elementy wyrównania: centrum nie działa w poziomie

Odpowiedz

Powiązane problemy