CODEWITHSUNDEEP
cssflexbox
Divya Sharma
Divya Sharma

Reputation: 237

How to bring a Text vertically center using Flex CSS for bar chart

I am trying to show the amount text as vertically horizontal just like Mozilla developer page shows for browser support but using flex CSS eg. https://developer.mozilla.org/en-US/docs/Web/CSS/transform (check in bottom of the page)

I have tried the flex CSS almost I have achieved it, but the text is breaking and its not center and bottom end align.

CSS

ul.chart-bg {
    width: 100%;
    height: 100%;
    border-bottom: 1px solid #ccc;
    padding: 0;
    display: flex;
    justify-content: space-between;
}

.container {
    flex: 1 1 auto;
    list-style: none;
    margin-left: 15px;
    display: flex;
    align-items: flex-end;
}

ul li.container:nth-child(1) {
    margin: 0 !important;
}

.skills {
    flex: 1 1 auto;
    padding: 0;
    width: 100%;
    animation: draw 1s ease-in-out;
    background-color: #e9e9e9;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    display: flex;
    align-items: flex-end;
}

.amount {
    flex: 1 1 auto;
    color: #9c9c9c;
    font-family: "sans-serif";
    transform-origin: 0 0;
    transform: rotate(-90deg);
    animation: amountVal 2s ease-in-out;
}

trying to bring the amount text in vertical alignment using flex for bar chart, but its breaking

Fiddle: https://jsfiddle.net/snx5mqj8/1/

Upvotes: 2

Views: 99

Answers (2)

Nisharg Shah
Nisharg Shah

Reputation: 19562

I changes some CSS property to perform text center

I removed transform-origin property in amount class and replace align-items: flex-end; with center in skill class and add white-space CSS property to see amount and text in one line

Here is your fiddle: https://jsfiddle.net/df6uraLw

Upvotes: 3

Aditya Thakur
Aditya Thakur

Reputation: 2610

If you want it to look exactly like the one in mozilla you'll need writing-mode and absolute positioning, here i did it without flexbox, using writing-mode and position:absolute, it aligns really well, see if it works for you https://jsfiddle.net/k6gcxysr/

.skills {
  padding: 0;
  width:100%;
  animation: draw 1s ease-in-out;
  background-color: #e9e9e9;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  position: relative;
}
.amount {
    color: #9c9c9c;
    font-family: "sans-serif";
    animation: amountVal 2s ease-in-out; 
    writing-mode: vertical-rl;
    position:absolute;
    right:30%;
    bottom:4%;
    transform: rotateZ(180deg);
    }

Upvotes: 2

Related Questions