can't center text inside div (horizontally and vertically) in Vue Laravel project while keepi-CodePudding

I have tried centering this text both vertically and horizontally, but for some reason it has not been working. The only solution I find is adding a bunch of media queries and adapt the margin according to the screen size, but there must be a better solution that centers the text while keeping it responsive. Any suggestions?

<div >
                <div  style="background-color:#f2f2f2;">                    
                    <div >
                        <h4  style="margin-bottom: 24px;text-transform: uppercase;">Pepe Calderin's Majestic Million Dollar Penthouse in Miami<div ></div></h4>
                        <p style="text-transform: uppercase; color:#EC1B33;">Luxurious, Modern & Artistic</p>
                        <p>Famous for delivering unique design projects with high-end standards, Pepe Calderin partnered up with Essential Home, DelightFULL and Mid-Century Club to create the ultimate dream home that captures the heart of the popular city of Miami. This majestic luxury penthouse project presents us with design excellency, top-quality pieces, and an incredible view of one of the most luxurious marinas in the city.</p>
                        <p>Featuring a carefully chosen selection of costume furniture, bespoke lighting, and unique art pieces, this incredible modern penthouse design features 14 different experiences flowing throughout two floors on top of one of Miami's most luxurious skyscrapers. Don't miss out on the chance to discover this flamboyant design project that can also be seen as the ultimate dream home.</p>                        
                    </div>
                    <div >
                        <a >
                            <img src="/images/campaigns/pepe-calderin/VIRTUALTOUR.jpg" alt="Karim Rashid House Chicago" >                            
                        </a>                        
                    </div>
                </div>
            </div>

CodePudding user response：

You can put your style inline style="text-align:center" if you want or you can use css

.text-description {text-align:center;}

<div >
                <div  style="background-color:#f2f2f2;">                    
                    <div  style="text-align:center">
                        <h4  style="margin-bottom: 24px;text-transform: uppercase;">Pepe Calderin's Majestic Million Dollar Penthouse in Miami<div ></div></h4>
                        <p style="text-transform: uppercase; color:#EC1B33;">Luxurious, Modern & Artistic</p>
                        <p>Famous for delivering unique design projects with high-end standards, Pepe Calderin partnered up with Essential Home, DelightFULL and Mid-Century Club to create the ultimate dream home that captures the heart of the popular city of Miami. This majestic luxury penthouse project presents us with design excellency, top-quality pieces, and an incredible view of one of the most luxurious marinas in the city.</p>
                        <p>Featuring a carefully chosen selection of costume furniture, bespoke lighting, and unique art pieces, this incredible modern penthouse design features 14 different experiences flowing throughout two floors on top of one of Miami's most luxurious skyscrapers. Don't miss out on the chance to discover this flamboyant design project that can also be seen as the ultimate dream home.</p>                        
                    </div>
                    <div >
                        <a >
                            <img src="/images/campaigns/pepe-calderin/VIRTUALTOUR.jpg" alt="Karim Rashid House Chicago" >                            
                        </a>                        
                    </div>
                </div>
            </div>

CodePudding user response：

best practice is using CSS Flexbox

        <div >
            <div  style="background-color:#f2f2f2;">                    
                <div  style="text-align:center;">
                    <h4  style="margin-bottom: 24px;text-transform: uppercase;">Pepe Calderin's Majestic Million Dollar Penthouse in Miami<div ></div></h4>
                    <p style="text-transform: uppercase; color:#EC1B33;">Luxurious, Modern & Artistic</p>
                    <p>Famous for delivering unique design projects with high-end standards, Pepe Calderin partnered up with Essential Home, DelightFULL and Mid-Century Club to create the ultimate dream home that captures the heart of the popular city of Miami. This majestic luxury penthouse project presents us with design excellency, top-quality pieces, and an incredible view of one of the most luxurious marinas in the city.</p>
                    <p>Featuring a carefully chosen selection of costume furniture, bespoke lighting, and unique art pieces, this incredible modern penthouse design features 14 different experiences flowing throughout two floors on top of one of Miami's most luxurious skyscrapers. Don't miss out on the chance to discover this flamboyant design project that can also be seen as the ultimate dream home.</p>                        
                </div>
                <div >
                    <a >
                        <img src="/images/campaigns/pepe-calderin/VIRTUALTOUR.jpg" alt="Karim Rashid House Chicago" >                            
                    </a>                        
                </div>
            </div>
        </div>

according to your class names, i assume you are using bootstrap, if not, you'll need these CSS classes to make it work

  <style>
    .d-flex{
        display: flex;
    }
    .flex-wrap{
        flex-wrap: wrap;
    }
    .align-content-center{
        align-content: center;
    }
    .justify-content-center{
        justify-content: center;
    }
</style>