引导和文本对齐

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 对齐在该部分的中心”设置此 div 边距：自动。

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

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

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

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

希望我能帮上忙。