1
I’m using positions to use the top and the left but it still doesn’t look cool.
CSS:
span.vertical {
writing-mode: vertical-lr;
transform: rotate(180deg);
height: 200px;
}
span.comum {
width: 100%;
}
div.cabecalhoVertical{
display: flex;
flex-direction: row;
width: 100%;
height: 200px;
flex-wrap: nowrap;
border: .1px rgb(0,0,0) solid;
}
div.cabecalhoVertical div {
border-right: .1px rgb(0,0,0) solid;
height: 100%;
flex-grow: 1;
}
div.cabecalhoVertical div span {
display: block;
text-align: center;
font-weight: bolder;
}
HTML:
<div class='cabecalhoVertical'>
<div style='width:100px;'><span class='comum' >Nome do Gcéu </span></div>
<div style='width:100px;'><span class='vertical'>Supervisor</span></div>
<div style='width:100px;'><span class='comum' >Líder</span></div>
<div style='width:050px;'><span class='vertical'>Houve Supervisão?</span></div>
<div style='width:050px;'><span class='vertical'>Houve dia de Jejum?</span></div>
<div style='width:050px;'><span class='vertical'>Houve dia de Evangedismo?</span></div>
<div style='width:050px;'><span class='vertical'>Membros Compromissados</span></div>
<div style='width:050px;'><span class='vertical'>Visitantes</span></div>
<div style='width:050px;'><span class='vertical'>Crianças de 0 à 12 anos</span></div>
<div style='width:050px;'><span class='vertical'>Total de presentes</span></div>
<div style='width:050px;'><span class='vertical'>Ofertas</span></div>
<div style='width:050px;'><span class='vertical'>Disicpulados</span></div>
<div style='width:050px;'><span class='vertical'>Número de decisões</span></div>
</div>
It was right but I couldn’t centralize the text (span) in div in one of the positions.
Upshot:
I tried with the CSS below using the postion but it was not good,
span.vertical {
writing-mode: vertical-lr;
transform: rotate(180deg);
height: 200px;
left: 50%;
margin-left: -25%;
}
span.comum {
width: 100%;
top: 50%;
margin-top: -100px;
}
div.cabecalhoVertical{
display: flex;
flex-direction: row;
width: 100%;
height: 200px;
flex-wrap: nowrap;
border: .1px rgb(0,0,0) solid;
}
div.cabecalhoVertical div {
position: relative;
border-right: .1px rgb(0,0,0) solid;
height: 100%;
flex-grow: 1;
}
div.cabecalhoVertical div span {
position: absolute;
display: block;
text-align: center;
font-weight: bolder;
}
The goal is centralize the span both in the vertical how much in the horizontal,
Both of us spans who are as upset as those who are not.
Upshot:
Okay. But there’s still a problem with this approach: Look, Gcéu’s Name wasn’t exactly centered. And, as would be the case that name was for example: Name of Gcéu where the ...: Well, that wouldn’t fit in a single line, which would be a problem. You know? For verticals, translateX solved it. I tried Translatey horizontal but realized that not everything is flowers. KKK
– Carlos Rocha
@Carlosrocha I think that for all the questions and answers that you have had here on the site these types of fine tuning you could do alone in my view, not all are flowers, in fact, but I know that if you try you solve. The role of the answers here is to help you grow, not to do 100% of your job, or to foresee out of the blue the problems you have there and didn’t mention when you first asked the question. With everything that Sam and I have already responded to, it’s not possible that you can’t make that kind of adjustment on your own. You have to do your part ;)
– hugocsl
Got it. So according to your perception I haven’t tried it here? I’ve tried it with align-items and it didn’t work. N]ao am the type that doesn’t try. But even so, I appreciate your effort already fetus and I will accept your answer as you accept! It’s just that here, there’s no proper space to show the attempts I’ve made other than the question. I’m following by this video https://www.youtube.com/watch?v=dbVQqcV9iEc, but when I try to use Alig-items it just doesn’t work
– Carlos Rocha
@Carlosrocha what I’m talking about is that with the techniques covered in the other answers you could already solve this, the align items only align the child if the father tbm has flex display. If you think the answer has solved it is cool, but if you think that this still not the way you would like to not have to worry about accepting, can appear someone else willing to help you with something closer to what you need, we do not answer only the points, and open questions not accepted disrupt the site. The intention here is to help the community, points are consequence. Abs
– hugocsl
Thanks, but I think I’m a little lost here. I have a better Back experience and I get a lot of css. I’m guessing that position: abasoluto is being the villain. I’ll try it another way
– Carlos Rocha
@Carlosrocha I’m in the street now but I’ll see if I can improve something for you
– hugocsl
Man, thank you so much for the support. I’ll wait
– Carlos Rocha