在Vue + Laravel项目中不能在div (水平和垂直)内对文本进行居中，同时保持它的响应性

Question

我试着把这篇文章放在纵向和横向的中心，但由于某种原因，它没有起作用。我发现的唯一解决方案是添加一组媒体查询，并根据屏幕大小调整页边距，但必须有更好的解决方案，在保持文本响应的同时居中。有什么建议吗？

<div class="row no-gutters">
                <div class="col-xs-12 p-0" style="background-color:#f2f2f2;">                    
                    <div class="col-xs-12 col-md-6 pt-1 px-5 text-description">
                        <h4 class="section-title text-left space-text" style="margin-bottom: 24px;text-transform: uppercase;">Pepe Calderin's Majestic Million Dollar Penthouse in Miami<div class="section-w-border"></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 class="col-xs-12 col-md-6 p-0">
                        <a class="swiper-anchor">
                            <img src="/images/campaigns/pepe-calderin/VIRTUALTOUR.jpg" alt="Karim Rashid House Chicago" class="img-responsive">                            
                        </a>                        
                    </div>
                </div>
            </div>

​

​

Answer 1

如果需要，可以将样式内联为style=“文本对齐:中心”，也可以使用css。

​

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

<div class="row no-gutters">
                <div class="col-xs-12 p-0" style="background-color:#f2f2f2;">                    
                    <div class="col-xs-12 col-md-6 pt-1 px-5 text-description" style="text-align:center">
                        <h4 class="section-title text-left space-text" style="margin-bottom: 24px;text-transform: uppercase;">Pepe Calderin's Majestic Million Dollar Penthouse in Miami<div class="section-w-border"></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 class="col-xs-12 col-md-6 p-0">
                        <a class="swiper-anchor">
                            <img src="/images/campaigns/pepe-calderin/VIRTUALTOUR.jpg" alt="Karim Rashid House Chicago" class="img-responsive">                            
                        </a>                        
                    </div>
                </div>
            </div>

​

Answer 2

最佳实践是使用CSS Flexbox

        <div class="row no-gutters">
            <div class="col-xs-12 p-0" style="background-color:#f2f2f2;">                    
                <div class="col-xs-12 col-md-6 pt-1 px-5 text-description d-flex flex-wrap align-content-center justify-content-center" style="text-align:center;">
                    <h4 class="section-title text-left space-text" style="margin-bottom: 24px;text-transform: uppercase;">Pepe Calderin's Majestic Million Dollar Penthouse in Miami<div class="section-w-border"></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 class="col-xs-12 col-md-6 p-0">
                    <a class="swiper-anchor">
                        <img src="/images/campaigns/pepe-calderin/VIRTUALTOUR.jpg" alt="Karim Rashid House Chicago" class="img-responsive">                            
                    </a>                        
                </div>
            </div>
        </div>

根据类名，我假设您正在使用引导程序，如果不是，您将需要这些CSS类来使其工作。

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