Question

如何将DIV中的项目（连续）文本对齐到顶部，同时将整个div对齐到该部分的中心。？

我可以将所有文本对齐到顶部，但是一旦我为div添加了一个中心类，它就会取消文本对齐

下面你可以看到我添加了 align-top ，它将DIV对齐到顶部，但是我如何添加一个样式来构成整个div的页面中心？我认为由于列宽

会自动完成

请帮我解决这个问题，谢谢

<!-- Services Section Start -->
<section id="services" class="section center-block" data-stellar-background-ratio="0.2">
    <div class="container ">
        <div class="section-header" id="#services">
            <h2 class="section-title">ABOUT US</h2>
            <hr class="lines wow zoomIn" id="lines">
            <p class="section-subtitle wow fadeIn" data-wow-duration="1000ms" data-wow-delay="0.3s">We are the Mother City’s top choice for tailor-made holistic treatment plans that empower you to take – and maintain - control of your own health and fertility. Our holistic approach offers you a range of complementary therapies, alongside the best of what conventional medicine has to offer globally, on your personalized path to parenthood.</p>
            <br>
        </div>
        **<div class="row col-md-12 top align-top">**
            <div class="col-md-4 col-sm-6 row item-boxes wow fadeInDown" data-wow-delay="0.2s">
                <div class="col-md-3 row">
                    <div class="icon">
                        <a href="#myModal" data-toggle="modal" data-target="#myModal"><i><img src="img/icons/setsusapart.png"></i></a>
                    </div>
                </div>
                <div class="col-md-9">
                    <p><b>For Egg & Sperm Recipients</b></p>
                    <p>When you’re not one of the lucky ones who can take fertility for granted, having your child could be difficult, or even impossible, without the help of a donor. </p>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 row item-boxes wow fadeInDown" data-wow-delay="0.8s">
                <div class="col-md-3 row">
                    <div class="icon">
                        <a href="#myModal1" data-toggle="modal" data-target="#myModal1"><i><img src="img/icons/our-facilities.png"></i></a>
                    </div>
                </div>
                <div class="col-md-9">
                    <p><b>Become an Egg Donar</b></p>
                    <p>A primary goal is to improve quality of life during and after treatment, and to facilitate a space for reflection on the diagnoses and/or treatment cycles that are recommended.</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 row item-boxes wow fadeInDown" data-wow-delay="1.2s">
                <div class="col-md-3 row">
                    <div class="icon">
                        <a href="#myModal" data-toggle="modal" data-target="#myModal"><i><img src="img/icons/setsusapart.png"></i></a>
                    </div>
                </div>
                <div class="col-md-9">
                    <p><b>For Egg & Sperm Recipients</b></p>
                    <p>When you’re not one of the lucky ones who can take fertility for granted, having your child could be difficult, or even impossible, without the help of a donor. </p>
                </div>
            </div>
        </div>
    </div>
    </div>
</section>
<!-- Services Section End -->

Answer 1

我不知道我是否完全理解你的问题，但你是否尝试制作这个div余量：自动为此＆＃34;时间将整个div对齐在该部分的中心。＆＃34; < / p>

如果你给任何div宽度声明宽度/最大宽度而不是auto，那么你可以用margin：auto;像这里你想要只做水平中心

.your-div{
text-align: center;
width: 80%;
margin: 0 auto;
}

或者如果你想要垂直和水平居中你的div。

.your-div{
text-align: center;
width: 80%;
margin: auto;
}

我希望我能帮忙。

Bootstrap和文本对齐

1 个答案: