Question

我想创建一个CSS框作为'徽标'块或者你有什么，在页面中间的另一个div中居中 - 我正在使用bootstrap 3，将div放入容器流体中我想要一个全宽的页面，然后从它的徽标部分开始。

我的代码如下

 .logo{

    width: 50rem;
    height: 50rem;
    margin: 0 auto;
    text-align: center;
    font-size: 15em;
    font-weight: 100;
    font-family: 'Raleway' , sans-serif;
    color: white;
    border: 14px solid black;
}

无论出于何种原因，这实际上并不是一个正方形 - 我假设这是基于字体大小，但似乎字体越大，它只是溢出框外 - 所以我可以为了我的生活，我想出如何垂直对齐这个文本，并在文本周围创建一个完美的正方形。任何见解将不胜感激 - 谢谢！

Answer 1

我有一个容器div，基本上可以是你的身体。尺寸可以调整。

然后是徽标类。该类具有相对宽度。在示例中：50％的父（容器类）

盒子没有固定的高度，所以它的高度取决于文字。

盒子位于中心槽中，绝对定位并再次转换。

.container {
  position: relative;
  width: 500px;
  height: 500px;
  background-color: gray;
}
.logo {
  position: relative;
  top: 50%;
  left: 50%;
  width: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 3em;
  font-weight: 100;
  font-family: 'Raleway', sans-serif;
  color: white;
  box-sizing: border-box;
  border: 14px solid black;
}

<div class="container">
  <div class="logo">
    Some random text goes here?
  </div>
</div>

使用边框的方形CSS框中居文本？

1 个答案: