Html 引导和文本对齐

如何将一个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 -->

关于我们

我们是母城量身定制的整体治疗计划的首选，让您能够控制自己的健康和生育能力。我们的整体方法为您提供了一系列的补充疗法，以及传统医学在全球范围内提供的最佳疗法，帮助您实现为人父母的个性化道路


****
对于卵子和精子接受者

如果你不是那种认为生育能力是理所当然的幸运儿，没有捐赠者的帮助，生孩子可能会很困难，甚至是不可能的

做一个捐卵人

一个主要目标是改善治疗期间和治疗后的生活质量，并为建议的诊断和/或治疗周期提供反思空间

对于卵子和精子接受者

如果你不是那种认为生育能力是理所当然的幸运儿，没有捐赠者的帮助，生孩子可能会很困难，甚至是不可能的

我不知道我是否完全理解您的问题，但您是否尝试过将此div margin:auto设置为“此时将整个div对齐到节的中心”

如果您给出除“自动”之外的任何div width声明宽度/max width，则可以使用margin:auto将其居中；就像这里，你只想做水平中心

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

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

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

---

希望我能帮上忙。

你能更清楚地说明你想要什么吗？添加引用或创建提琴？不要将

行

直接嵌套在

行

中，并且

行

不应与

列-*

在同一个div上使用。我将该类应用于该div，它向左移动了更多，但我想说的是，很抱歉我的糟糕解释是：简单地说，div没有跨越整个截面宽度，即使我指定col-md-12也是如此。我给了容器一个宽度，并应用了您提供的样式，这似乎很有效，谢谢！但是如果你能告诉我为什么div不会自动居中，如果它是在bootsrap中创建的，并且div在一个已经居中对齐的部分内？这不是最好的解决方案，但也许可以试着像我一样：你可以改变它来调整内容：周围的空间使其更加居中；我不是引导专家，但可能是因为你把这个col-12列给了row，但在引导文档中，它似乎是col-12列中的一列，如这里所示：三列中的一列，三列中的一列，三列中的一列，所以第一个div width类行和in-it div width类col-12