Question

我如何实现以下风格：

********************
*                  *
*     ********     *
*     *Text  *     *
*     ********     *
*                  *
********************

内框居中，但内部文字不是。

Answer 1

＆＃13;

.container {
  text-align: center;
  width: 50%;
  height: 25%;
  background-color: #00aaff;
  padding: 20px;
}
.box {
  text-align: left;
  width: 35%;
  height: 50%;
  background-color: #00aa00;
  margin: 0 auto;
}

＆＃13;

<div class="container">
      <div class="box">
        Text
      </div>
    </div>

＆＃13;

Answer 2

从这个HTML开始：

<div class="outer">
    <div class="inner">Test</div>
</div>

然后应用这些CSS样式：

.outer {
    height: 100px;
    width: 200px;
    background-color: green;
    display: flex;
    align-items: center;
}

.inner {
    height: 50px;
    line-height: 50px;
    width: 100px;
    background-color: blue;
    color: white;
    margin: auto;
}

尺寸和着色样式应该是显而易见的，您可以根据需要制作任何尺寸和颜色。其他风格是你用来获得你正在寻找的定位的东西，我会解释它们。

display: flex;
align-items: center;

（这不适用于旧版浏览器。如果需要，我会留给你研究。）这两个框沿着Y轴（垂直）将内框放在外框中。

margin: auto;

这使内盒沿着X轴居中于外盒中。

line-height: 50px;

如果您希望文本在内框中垂直居中，则此值必须与内框的height值相同。

除了Text Inside之外，水平居中一个Div

2 个答案: