1

我需要你的帮助，

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

见下图：

在此处输入图像描述

期望的结果是：

在此处输入图像描述

这是 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>
4

6 回答 6

4

这是一个小提琴

#alertText {
  position: absolute;
  width: 100%;
  height: 20px;
  top: 50%;
  margin-top: -10px;
  text-align: center;
}
于 2013-09-12T15:08:45.543 回答
0

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

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

如果您要拥有更多的文本行，则可能需要以其他方式进行。可能与position.

于 2013-09-12T15:03:40.087 回答
0

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

<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 中对齐文本甚至图像。

于 2013-09-12T15:06:01.350 回答
0

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

于 2013-09-12T15:06:01.580 回答
0

你可以使用填充：

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

#alertText {
max-width:400px;
padding:50px;
}
于 2013-09-12T15:09:13.030 回答
0

您可以将您的内容设置div为具有display: table;并使用定位来批判性地居中以下内容：

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

这也将优雅地支持多行文本，而无需任何硬编码或幻数。

结果如下：

在此处输入图像描述

Codepen 草图。

于 2013-09-12T15:10:12.530 回答