html - Bootstrap 和文本对齐

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 margin: auto 设置为“将整个 div 时间对齐到该部分的中心。”

如果你给任何 div 宽度声明 width/max-width 而不是 auto 那么你可以用 margin: auto; 居中它；就像这里你只想做水平居中

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

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

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

希望我帮到了你。