我正在尝试找到最有效的方法来将文本与div对齐。我尝试了一些方法,但似乎没有一个有效。

.推荐文本{位置:绝对;左:15px;顶部:15px;宽度:150px;高度:309px;垂直对齐:中间;文本对齐:居中;字体系列:Georgia,“Times New Roman”,Times,serif;字体样式:斜体;填充:1em 0 1em 0;}<div class=“推荐文本”>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯,quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。Duis aute irure多尔代表在voluptate velit esse cillum dolore eu fugiat nullapariator。除了你偶尔犯下的错误外,你还得承担责任,这是因为你在实验室里表现得很糟糕。</div>


当前回答

Flexbox非常适合我,将父div中的多个元素水平和垂直居中。

下面的代码将父div内的所有元素堆叠在一列中,并将元素水平和垂直居中。我使用子div将两个Anchor元素保持在同一行(行)上。在没有子div的情况下,所有三个元素(Anchor、Anchor和Paragraph)都堆叠在父div的列中。这里只有子div堆叠在父div列中。

.父div{高度:150px;显示:柔性;弯曲方向:柱;对齐内容:中心;背景:粉色;}<div class=“parent div”><div class=“child div”><a class=“footer link”href=“https://www.github.com/“>GitHub</a><a class=“footer link”href=“https://www.facebook.com/“>脸书</a><p class=“footer copywrite”>©2019 Lorem Ipsum</p></div></div>

其他回答

这里有一个最适合单行文本的解决方案。

如果知道行数,它还可以对多行文本进行一些调整。

.testimonialText {
    font-size: 1em; /* Set a font size */
}
.testimonialText:before { /* Add a pseudo element */
    content: "";
    display: block;
    height: 50%;
    margin-top: -0.5em; /* Half of the font size */
}

这是一个JSFiddle。

HTML

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

CSS

 .relative {
     position: relative;
 }
 .absolute {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.5);
 }
 .table {
     display: table;
     height: 100%;
     width: 100%;
     text-align: center;
     color: #fff;
 }
 .table-cell {
     display: table-cell;
     vertical-align: middle;
 }

在现代浏览器中,正确的方法是使用Flexbox。

有关详细信息,请参阅此答案。

请参阅下面的一些在旧浏览器中工作的旧方法。


CSS中的垂直居中http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

文章摘要:

对于CSS2浏览器,可以使用display:table/display:table单元格来居中显示内容。

JSFiddle也提供了示例:

div{border:1px实心绿色;}<div style=“display:table;height:400px;溢出:隐藏;”><div style=“display:表格单元格;垂直对齐:中间;”><div>在现代IE8+和其他版本中,一切都是垂直居中的。</div></div></div>

可以使用#将旧浏览器(Internet Explorer 6/7)的黑客行为合并到样式中,以隐藏新浏览器的样式:

div{border:1px实心绿色;}<div style=“display:table;height:400px;#position:relative;overflow:hidden;”><div样式=“#位置:绝对;#顶部:50%;显示:表格单元格;垂直对齐:中间;”><div style=“#position:relative;#top:-50%”>一切都是垂直居中的</div></div></div>

一个不知道价值的简单解决方案:

HTML

<div class="main">
    <div class="center">
        whatever
    </div>
</div>

CSS

.main {
    position: relative
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

使用CSS网格为我做到了:

.外部{背景色:灰色;宽度:10rem;高度:10rem;显示:栅格;对齐项目:中心;}.内部{背景色:#FF8585;对齐自身:中心;}<div class='outer'><div class='inner'>所容纳之物</div></div>