我正在尝试找到最有效的方法来将文本与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>


当前回答

使用CSS网格为我做到了:

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

HTML格式:

<div class="col-md-2 ml-2 align-middle">
    <label for="option2" id="time-label">Time</label>
</div>

CSS:

.align-middle {
    margin-top: auto;
    margin-bottom: auto;
}

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

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

.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。

在网格项上自动边距。

与Flexbox类似,在网格项上应用自动边距会使其在两个轴上居中:

.container {
  display: grid;
}
.element {
  margin: auto;
}

这是一个很好的资源

从…起http://howtocenterincss.com/:

以CSS为中心是一件令人头疼的事。根据各种因素,似乎有无数种方法可以做到这一点。这将整合它们,并为您提供每种情况所需的代码。

使用Flexbox

在保持这篇文章与最新技术保持同步的同时,这里有一个更容易的方法来使用Flexbox将内容居中。Internet Explorer 9及更低版本不支持Flexbox。

以下是一些很棒的资源:

Flexbox指南带Flexbox的定心元件Flexbox的Internet Explorer 10语法Flexbox支架

带有浏览器前缀的JSFiddle

李{显示:柔性;对齐内容:中心;对齐内容:居中;弯曲方向:柱;/*列|行*/}<ul><li><p>某些文本</p></li><li><p>还有两行文字</p></li><li><p>更多的文本演示了行如何跨越多行</p></li></ul>

另一种解决方案

这是从零六三开始的,可以让你用六行CSS将任何东西居中

Internet Explorer 8及更低版本不支持此方法。

小提琴演奏家

p型{文本对齐:居中;位置:相对;顶部:50%;-ms变换:translateY(-50%);-webkit转换:translateY(-50%);变换:translateY(-50%);}<ul><li><p>某些文本</p></li><li><p>还有两行文字</p></li><li><p>更多的文本演示了行如何跨越多行</p></li></ul>

上一个答案

一种简单且跨浏览器的方法很有用,因为标记答案中的链接有点过时。

如何在无序列表和div中垂直和水平居中文本,而不使用JavaScript或CSS行高。无论您有多少文本,您都不必将任何特殊类应用于特定列表或div(每个列表或div的代码都相同)。这适用于所有主要浏览器,包括Internet Explorer 9、Internet Explorer 8、Internet Explorer 7、Internet Explorer 6、Firefox、Chrome、Opera和Safari。有两个特殊的样式表(一个用于InternetExplorer7,另一个用于Internet Explorer6)可以帮助它们,因为它们的CSS限制是现代浏览器所没有的。

Andy Howard-如何在无序列表或div中垂直和水平居中文本

由于我在上一个项目中不太关心InternetExplorer7/6,所以我使用了一个稍微精简的版本(即删除了使其在InternetExplorer7和6中工作的内容)。这可能对其他人有用。。。

JSFiddle公司

.外部容器{显示:表格;宽度:100px;/*父项的宽度*/高度:100px;/*父项的高度*/溢出:隐藏;}.outerContainer.innerContainer{显示:表格单元格;垂直对齐:中间;宽度:100%;边距:0自动;文本对齐:居中;}李{背景:#ddd;宽度:100px;高度:100px;}<ul><li><div class=“outerContainer”><div class=“innerContainer”><div class=“element”><p><!-- 内容-->所容纳之物</p></div></div></div></li><li><div class=“outerContainer”><div class=“innerContainer”><div class=“element”><p><!-- 内容-->所容纳之物</p></div></div></div></li></ul>