Question

我需要你的帮助，

盒子白色部分内的文字如何对齐死点（垂直和水平对齐）？

见下图：

enter image description here

期望的结果是：

enter image description here

这是HTML标记：

<!DOCTYPE html>
<html>
<head>
    <title>Centered Div</title>
    <style>

#wrapper {
    height: 100px;
    width: 500px;
    bottom: 50%;
    right: 50%;
    position: absolute;
    font-family: tahoma;
    font-size: 8pt;
    font-weight: bold;
}

#container {
    background: #FFF;
    left: 50%;
    padding: 10px;
    top: 50%;
    margin: 0;
    padding: 0;
    height: 100%;
    border: 1px solid rgb(128,128,128);
    height: 100%;
    position: relative;
}

#inner1 {
    height: 100%;
    border: 1px solid blue;
}
#inner2 {
    height: 100%;
    border: 1px solid green;
}
#titlebar {
    cursor: pointer;
    height: 23px;
    width: 100%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#0A246A, endColorStr=#A6CAF0, GradientType=1);
    color: white;
    line-height:22px;
}
#button {
     line-height: 10px;
     width: 18px;
     font-size: 10px;
     font-family: tahoma;
     margin-top: 1px;
     margin-right: 2px;
     position:absolute;
     top:0;
     right:0;
}
#alertText {


}
    </style>
</head>
<body>


    <div id="wrapper">

        <div id="container">

            <div id="titlebar"><div style="padding-left: 3px;">Information Box</div></div>

            <div><input id="button" type="button" value="X"></div>

            <div id="alertText">This is some sample text that will appear here</div>

        </div>

    </div>

</body>
</html>

Answer 1

这里是Fiddle

#alertText {
  position: absolute;
  width: 100%;
  height: 20px;
  top: 50%;
  margin-top: -10px;
  text-align: center;
}

Answer 2

如果它只是一行文字，你可以这样做：

#alertText {
    line-height: 58px;
    text-align: center;
}

如果你想要更多的文字行，你可能需要以其他方式去做。可以使用position。

Answer 3

在最近的一个项目中，我编写了这个代码：

<div class="table">
    <div class="cell">
        <img src="whatever.png">
        <p>Understand align</p>
    </div>
</div>

<style>
    .table              { display: table; width: 100%; height:100%;}
    .table .cell        { display: table-cell; text-align:center; vertical-align: middle;}
</style>

希望它有用。您可以在“单元格”div中对齐文本甚至图像。

Answer 4

这实际上比它看起来更难。您可能会发现本教程很方便：http://tympanus.net/codrops/2013/07/14/justified-and-vertically-centered-header-elements/

Answer 5

你可以使用填充：

小提琴：http://jsfiddle.net/parslook/PgEwF/2/

#alertText {
max-width:400px;
padding:50px;
}

Answer 6

您可以将div设置为display: table;并使用定位将内容置于关键中心位置：

#alertText {
  display: table;
  position: absolute;
  top: 0;
  margin: auto;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  width: 100%;
}

这也可以优雅地支持多行文本而不需要任何硬编码或幻数。

结果如下：

enter image description here

Codepen sketch.

将div中的文本设为死点（垂直和水平）

6 个答案: