CODEWITHSUNDEEP
javascripthtmljquerycss
MaxK123
MaxK123

Reputation: 450

Make text in center of div and expand from the middle if there is a lot of text

I have a div witch is a square box and I want it to me in the middle, the more textyou put in it will still be in the middle, I am making my box square with JQuery and would like to center it with css. here is my code:

<div class="project-item" style="background-color:orange;">
                <div class="darkShade">
                    <p>project.TextContent</p>
                    </div>
            </div>

CSS

.project-item {
    width: 33%;
    background-size: cover;
    color: #FFF;
    position: relative;

    .darkShade {
        padding: 2em;
    }



    p {
        opacity: 0;
        transition: 0.2s all;
    }

    form {
        display: flex;
        flex-direction: column;
        position:relative;

        div {
            display: flex;
            flex-direction: row;
            width: 100%;
        }
    }
}



.project-item:hover {
    p {
        opacity:1;
    }
}

JQuery

var cw = $('.project-item').width();
$('.project-item').css({
    'height': cw + 'px'
});

https://jsfiddle.net/su3h76am/4/

Thanks in advance Best regards Max

Upvotes: 0

Views: 90

Answers (1)

iain
iain

Reputation: 472

Like this? https://jsfiddle.net/vcts5h8o/

  .project-item {
    width: 33%;
    background-size: cover;
    color: #FFF;
    position: relative;
    
    //
    display: flex;
   

    .darkShade {
        padding: 2em;
        
        //
        margin: auto;
        width: max-content;
    }
  }

Upvotes: 1

Related Questions