Question

我正在尝试编写自己的CSS来模拟本网站的design。目前，我使用此代码将屏幕划分为四个部分：

HTML：

  <body>

    <div class="topnav">
    Welcome to TBD
    </div>

    <a href="URL">
    <div class="part1"></div>
    </a>
    <div class="part2"></div>
    <div class="part3"></div>
    <a href="URL">
    <div class="part4"></div>
    </a>


  </body>

CSS：

 html,body 
 {
    padding:0;
    margin:0;
    height:100%;
    min-height:100%;
  }
.part1 {background-color:#722F37; width:50%; height:50%; float:left}
.part2 {background-color:#FFC987; width:50%; height:50%; float:left}
.part3 {background-color:#f4a460; width:50%; height:50%; float:left}    
.part4 {background-color:#7F171F; width:50%; height:50%; float:left}

我想在我创建的每个div的中心直接放置一些文本和图像。我尝试了这个，但只能让文本显示在每个div的顶部，而不是死点。我怎么能这样做？

Here是我目前布局的缩影。

Answer 1

您可以这样做：

html,body 
 {
    padding:0;
    margin:0;
    height:100%;
    min-height:100%;
  }
  
.part1 {background-color:#722F37; width:50%; height:50%; float:left; position: relative; }
.part2 {background-color:#FFC987; width:50%; height:50%; float:left; position: relative;}
.part3 {background-color:#f4a460; width:50%; height:50%; float:left; position: relative;}    
.part4 {background-color:#7F171F; width:50%; height:50%; float:left; position: relative;}

.part1 label, .part2 label, .part3 label, .part4 label { 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  margin: 0px auto;
  transform: translateX(-50%); 
}

  <body>

    <div class="topnav">
    Welcome to TBD
    </div>

    <a href="URL">
    <div class="part1">
      <label>I'm centered</label>
    </div>
    </a>
    <div class="part2">
      <label>I'm centered</label>
    </div>
    <div class="part3">
      <label>I'm centered</label>
    </div>
    <a href="URL">
    <div class="part4">
      <label>I'm centered</label>
    </div>
    </a>


  </body>

另外，阅读本文，它正是您要实现的目标，但是以三种不同的方式使用代码示例 https://www.devplayground.net/align-element-vertically-center-using-css/

Answer 2

您可以在每个div元素中添加一个属性，如下所示：

div {
  display: table;
  text-align: center;
  ...
}

div中的元素分配以下显示（例如，如果要对齐div元素内的h1）：

h1 {
  display: table-cell;
  vertical-align: middle;
}

当您想要将元素准确对齐（垂直和水平）时，这非常有用。希望这有帮助。

您的代码应如下所示：

<body>
  <div class="topnav">
    Welcome to TBD
  </div>
  <a href="URL">
  <div class="part1"><h1>Text</h1></div>
  </a>
  <div class="part2"><h1>Text2</h1></div>
  <div class="part3"><h1>Text3</h1></div>
  <a href="URL">
  <div class="part4"><h1>Text4</h1></div>
  </a>
</body>

你的css文件：

html,body 
{
  padding:0;
  margin:0;
  height:100%;
  min-height:100%;
}
.part1 {display: table; text-align: center; background-color:#722F37; width:50%; height:50%; float:left}
.part2 {display: table; text-align: center; background-color:#FFC987; width:50%; height:50%; float:left}
.part3 {display: table; text-align: center; background-color:#f4a460; width:50%; height:50%; float:left}    
.part4 {display: table; text-align: center; background-color:#7F171F; width:50%; height:50%; float:left}
h1 {display: table-cell; vertical-align: middle;}

Answer 3

将您的内容换成另一个div并为其设置以下规则：

.innerBlock {
  text-align: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%); 
}

这是工作的jsfiddle：https://jsfiddle.net/c95yyywr/1/

这是片段：

 html,body 
 {
    padding:0;
    margin:0;
    height:100%;
    min-height:100%;
  }
.part1 {background-color:#722F37; width:50%; height:50%; float:left}
.part2 {background-color:#FFC987; width:50%; height:50%; float:left}
.part3 {background-color:#f4a460; width:50%; height:50%; float:left}    
.part4 {background-color:#7F171F; width:50%; height:50%; float:left}

.innerBlock {
  text-align: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%); 
}

p {
  padding: 0;
  margin: 0 0 6px 0;
}

img {
  max-height: 30px;
}

  <body>

    <div class="topnav">
    Welcome to TBD
    </div>

    <a href="URL">
    <div class="part1">
      <div class="innerBlock">
      <p>Text</p>
        <img src='https://graphicdesign1aust.files.wordpress.com/2012/03/nikelogo.png'>
      </div>
    </div>
    </a>
    <div class="part2">
      <div class="innerBlock">
        <p>Text</p>
        <img src='https://graphicdesign1aust.files.wordpress.com/2012/03/nikelogo.png'>
      </div>
    </div>
    <div class="part3">
      <div class="innerBlock">
        <p>Text</p>
        <img src='https://graphicdesign1aust.files.wordpress.com/2012/03/nikelogo.png'>
      </div>
    </div>
    <a href="URL">
    <div class="part4">
      <div class="innerBlock">
        <p>Text</p>
        <img src='https://graphicdesign1aust.files.wordpress.com/2012/03/nikelogo.png'>
      </div>
    </div>
    </a>


  </body>

Answer 4

您可以使用flexbox。以下是使用flexbox解决的代码：https://jsfiddle.net/r49t61ka/ 但我强烈建议您查看这篇文章：A Guide to Flexbox

.part{
  display:flex;
  justify-content: center; //Center the element horizontally
  align-items: center; //Center the element vertically
 }



<a href="URL">
    <div class="part1 part">asd</div>
    </a>
    <div class="part2 part">asd</div>
    <div class="part3 part">asdsd</div>
    <a href="URL">
    <div class="part4 part">asdsdsd</div>
    </a>

Answer 5

我强烈建议您使用flexbox。您可以将每个div设置为“display：flex”，“justify-content：center”和“align-items：center”。 CSS-Tricks有一个很好的使用flexbox的指南。我发誓他们。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

在Div的精确中心显示图像和文字

5 个答案: