Question

我有一个页面，我显示两个网站的状态 - 如果它们当前正在运行或不运行。如果站点已启动，我希望块具有浅绿色背景，如果不是，则为浅红色背景。该网站的名称应该在该区域内居中。

这是我到目前为止所尝试的：

    body {
      font-family: sans-serif;
    }
    #container {
      width: 800px;
      height: 600px;
      margin: 0 auto;
      border: 1px solid #ccc;
    }
    #smallcontainer {
      width: 208px;
      height: 100px;
      margin: 200px auto auto;
    }
    .status {
      height: 100px;
      width: 100px;
      background: #efefef;
      float: left;
      margin-left: 2px;
      border: 1px solid #ccc;
    }

<div id="container">
  <div id="smallcontainer">
    <div class="status"></div>
    <div class="status"></div>
  </div>
</div>

它有效（见full screen output），但我觉得我离开了。我如何使用CSS，正确的方式做一些简单的事情？我觉得我的代码是黑客。那么如何将文本准确地写在块的中心，垂直和水平？

是否有可能让它适用于所有桌面屏幕尺寸？也许我应该指定宽度和高度百分比而不是像素？

Answer 1

您可以使用flexbox。 <子> ^support

HTML

<div id="container">
    <div class="status"></div>
    <div class="status"></div>
</div>

CSS

#container {
    width: 800px;
    height: 600px;
    margin: 0 auto;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
}
.status {
    height: 100px;
    width: 100px;
    background: #efefef;
    margin-left: 2px;
    border: 1px solid #ccc;
}

<强> http://jsfiddle.net/b9n3h1en/

Answer 2

试试这个Fiddle，在div的中心垂直和水平对齐文字。

body {
        font-family: sans-serif;
    }
    #container {
        width: 800px;
        height: 600px;
        margin: 0 auto;
        border: 1px  solid #ccc;
    }
    #smallcontainer {
        width: 208px;
        height: 100px;
        text-align: center;
        margin: 200px auto auto;
    }
    .status {
        height: 100px;
        width: 100px;
        background: #efefef;
        float: left;
        margin-left: 2px;
        border: 1px solid #ccc;
        line-height: 100px;
    }

Answer 3

试试这个jsfiddle

body {
      font-family: sans-serif;
    }
    #container {
      width: 100%;
      height: 400px;

      margin: 0 auto;
      border: 1px solid #ccc;
    position:relative;
    }
    #smallcontainer {
      width: 208px;
      height: 100px;
      position:absolute;
      left:50%;
      top:50%;
      margin-left:-100px;
      margin-top:-50px;
    }
    .status {
        height: 100px;
        width: 100px;
        background: #efefef;
        float: left;
        margin-left: 2px;
        border: 1px solid #ccc;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-box-pack: center;
        -webkit-box-align: center;

        display: -moz-box;
        -moz-box-orient: vertical;
        -moz-box-pack: center;
        -moz-box-align: center;

        display: box;
        box-orient: vertical;
        box-pack: center;
        box-align: center; 
        text-align:center;
    }

另见＆＃34;显示：flexbox＆＃34; https://developer.mozilla.org/en-US/docs/Web/CSS/display

Answer 4

以下是我的表现：

HTML：

<div id="container">
    <div id="smallcontainer">
        <div class="status">
            <div class="border">
                <div class="txt">Text Here</div>
            </div>
        </div>
        <div class="status">
            <div class="border">
                <div class="txt">More Text Here</div>
            </div>
        </div>
    </div>
</div>

CSS：

* {
    box-sizing: border-box;
}
body {
    font-family: sans-serif;
}
#container {
    width: 95%;
    height: 400px;
    margin: 0 auto;
    border: 1px solid #ccc;
    position: relative;
}
#smallcontainer {
    width: 208px;
    height: 100px;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.status {
    height: 100%;
    width: 50%;
    float: left;
    text-align: center;
    padding: 2px;
}
.border {
    background: #efefef;
    border: 1px solid #ccc;
    width: 100%;
    height: 100%;
    position: relative;
}
.txt {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

请参阅此处的小提琴：http://jsfiddle.net/bootsified/kf7Lbq24/

Answer 5

您可以为要准确放在中心的每个div添加负边距。请注意，为此，宽度和高度应以像素为单位。

body {
  font-family: sans-serif;
}
#container {
  width: 800px;
  height: 600px;
  border: 1px solid #ccc;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -400px;
  margin-top: -300px;
}
#smallcontainer {
  width: 208px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -104px;
  margin-top: -50px;
}
.status {
  height: 100px;
  width: 100px;
  background: #efefef;
  float: left;
  margin-left: 2px;
  border: 1px solid #ccc;
}

<div id="container">
  <div id="smallcontainer">
    <div class="status"></div>
    <div class="status"></div>
  </div>
</div>

如何在页面中居两个方块？

5 个答案: