CODEWITHSUNDEEP
htmlcssflexboxcentering
Patryk Dąbrowski
Patryk Dąbrowski

Reputation: 177

How to vertically center with flexbox and force word wrap?

I want to vertically center primary__wraper but it doesn't work.

I also would like to force word wrap. At the moment "częsci zamienne" is appear side by side.

How can I push one down onto a second line. I mean "zamienne" to the second line.

here is a codepen demo

HTML code

  <section class="primary">
    <div class="primary__wraper">
        <figure>
            <img src="../build/img/ikona_klucz.png" alt="">
            <figcaption>serwis</figcaption>
        </figure>

        <figure>
            <img src="../build/img/box_icon.png" alt="">
            <figcaption>częsci zamienne</figcaption>
        </figure>
    </div>
</section>

And the SASS code

.primary {
background: -webkit-linear-gradient(top, rgb(10,198,162) 0%,rgb(0,160,175) 100%);
height: 500px;
width: 100%;

&__wraper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    figure {
        img {
            width: 100px;
        }

        figcaption {
            font-family: $font;
            text-transform: uppercase;
            font-weight: 700;
            @include font-size(30px);
            text-align: center;
            color: rgb(255,255,255);
            padding-top: 10px;
        }
    }
}

Upvotes: 1

Views: 823

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371341

A flex container can use flex properties to align child elements (aka, "flex items").

The element you want vertically centered (primary__wraper) is a flex container, but not a flex item.

An easy way to vertically center primary__wraper would be to make the parent a flex container.

.primary {
    display: flex;              /* new */
    justify-content: center;    /* new */
    align-items: center;        /* new */
    background: -webkit-linear-gradient(top, rgb(10,198,162) 0%,rgb(0,160,175) 100%);
    height: 500px;
    width: 100%;
}

Now, flex alignment properties apply to the child.

I also added text-align: center which applies to the children of the figure elements, and corrected an error in your HTML: You had <figure="primary__figure"> which should be <figure class="primary__figure">. It can now be targeted by the CSS.

revised codepen

Upvotes: 1

Sachin Sanchaniya
Sachin Sanchaniya

Reputation: 1044

Use Inline Css Or Give Different Class For Doing Word wrap.

.primary {
background: -webkit-linear-gradient(top, rgb(10,198,162) 0%,rgb(0,160,175) 100%);
height: 500px;
width: 100%;

&__wraper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    figure {
        img {
            width: 100px;
        }

        figcaption {
            font-family: $font;
            text-transform: uppercase;
            font-weight: 700;
            @include font-size(30px);
            text-align: center;
            color: rgb(255,255,255);
            padding-top: 10px;
          
          
        }
      
    }
  
}
    
  
<section class="primary">
    <div class="primary__wraper">
        <figure>
            <img src="../build/img/ikona_klucz.png" alt="">
            <figcaption>serwis</figcaption>
        </figure>

        <figure>
            <img src="../build/img/box_icon.png" alt="">
            <figcaption style="width:64px;word-wrap: break-word;">częsci zamienne</figcaption>
        </figure>
    </div>
</section>

Upvotes: 1

Related Questions