How to center vertical this text?

Question

HTML:

<section class="zdjecia">
    <div class="row">
        <div class="col span-1-of-2">
            <div class="box-foto2">
                <div class="box-foto2-content">
                    <div class="text1-wrapper">
                        <div class="text1-padding">
                            <h5>PROFESJONALIZM</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col span-1-of-2">
            <div class="box-foto1"></div>
        </div>
    </div>    
</section>

CSS:

.box-foto1 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(img/fryz1.jpg);
    background-size: cover;
    background-position: center center;
    position: relative;
    width: 100%;
}

.box-foto1:before {
    content: "";
    display: block;
    padding-top: 100%;  /* initial ratio of 1:1*/
    vertical-align: middle;
}

.box-foto2 {
    background-color: #f4f4f4 ;
    position: relative;
    width: 100%;
}

.box-foto2:before {
    content: "";
    display: block;
    padding-top: 100%;  /* initial ratio of 1:1*/
}

.box-foto2-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.text1-wrapper {
    display: flex;
    align-items: center;
}

h5 {
    font-size: 320%;
    font-family: 'Oswald';
    font-weight: 500;
    line-height: 42px;
    letter-spacing: 6px;
    color: #444;
    word-wrap: break-word;
}

I want vertical align middle this text. I can't use

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

because text isn't wrapping when im using this. I was trying to use vertical-align but that didn't work. What should i do?

https://stackoverflow.com/questions/2939914/how-do-i-vertically-align-text-in-a-div — Temani Afif, Feb 05 '18 at 08:00
https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div — Temani Afif, Feb 05 '18 at 08:00
https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers — Temani Afif, Feb 05 '18 at 08:01

score 1 · Answer 1 · answered Feb 05 '18 at 07:41

1

Try this for your text1-wrapper class.

.text1-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

answered Feb 05 '18 at 07:41

Saravana

3,389
4
21
37

score 0 · Answer 2 · answered Feb 05 '18 at 07:40

You can use line-height and then text-align center. Here is the code

.box-foto1 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(img/fryz1.jpg);
    background-size: cover;
    background-position: center center;
    position: relative;
    width: 100%;
}

.box-foto1:before{
    content: "";
    display: block;
    padding-top: 100%;  /* initial ratio of 1:1*/
    vertical-align: middle;
}

.box-foto2 {
    background-color: #f4f4f4 ;
    position: relative;
    width: 100%;
    line-height:350px;
    text-align:center;
    
}

.box-foto2:before{
    content: "";
    display: block;
    padding-top: 100%;  /* initial ratio of 1:1*/
}

.box-foto2-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

<section class="zdjecia">
        <div class="row">
            <div class="col span-1-of-2">
                <div class="box-foto2">
                    <div class="box-foto2-content">
                        <div class="text1-wrapper">
                            <div class="text1-padding">
                                <h5>PROFESJONALIZM</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col span-1-of-2">
                <div class="box-foto1"></div>
            </div>
        </div>

    </section>

`line-height: 350px` this is wrong way to align center batter you can use `display: flex;align-items: center;`.. — lalit bhakuni, Feb 05 '18 at 08:51
Hmm. i saw above answers and realize that was much better than this @lalitbhakuni — Rupal, Feb 05 '18 at 08:58

Ehsan · Answer 3 · 2018-02-05T07:47:12.357

Insert this code:

.box-foto2-content {
    display: flex;
    //Other css...
}

.text1-wrapper {
    margin: 0 auto;
    //Other css...
}

.box-foto1 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(img/fryz1.jpg);
    background-size: cover;
    background-position: center center;
    position: relative;
    width: 100%;
}

.box-foto1:before{
    content: "";
    display: block;
    padding-top: 100%;  /* initial ratio of 1:1*/
    vertical-align: middle;
}

.box-foto2 {
    background-color: #f4f4f4 ;
    position: relative;
    width: 100%;
}

.box-foto2:before{
    content: "";
    display: block;
    padding-top: 100%;  /* initial ratio of 1:1*/
}

.box-foto2-content {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.text1-wrapper {
    display: flex;
    align-items: center;
    margin: 0 auto;
}





h5 {
    font-size: 320%;
    font-family: 'Oswald';
    font-weight: 500;
    line-height: 42px;
    letter-spacing: 6px;
    color: #444;
    word-wrap: break-word;
}

<section class="zdjecia">
        <div class="row">
            <div class="col span-1-of-2">
                <div class="box-foto2">
                    <div class="box-foto2-content">
                        <div class="text1-wrapper">
                            <div class="text1-padding">
                                <h5>PROFESJONALIZM</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col span-1-of-2">
                <div class="box-foto1"></div>
            </div>
        </div>

    </section>

score 0 · Answer 4 · answered Feb 05 '18 at 07:44

0

Since you are using flex property you should modify your text1-wrapper class to

       .text1-wrapper {
            display: flex;
            justify-content: center;
}

answered Feb 05 '18 at 07:44

Friday Ameh

1,664
1
10
15

How to center vertical this text?

4 Answers4