Question

我正在尝试使下面的每个DIV中的文本垂直居中，以便在文本的上方和下方有相等的空间。我也喜欢它，以便我可以更改URL的颜色，使其不是蓝色。我也希望他们两个能够触摸，他们但我无法弄清楚如何让它回来。

<style>
  .message1 {
    height: 100px;
    width: 100%;
    background-color: #f0f0f0;
  }

 .message2 {
    height: 100px;
margin-top: 50px;
    width: 100%;
    background-color: #3a3a3a;
  }
</style>

<style>
.messagetext {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 0px;
  margin-left: 20px;
  padding: 0px;
</style>

<div class= "message1">

<div class= "messagetext"><font size="4" color= "#6d1a76"><p class="Roboto"><a href="URL">URL TEXT</p></font></a></div>

  </div>

<div class= "message2">

<div class= "messagetext"><font size="3" color= "#ffffff"><p class="Roboto">TEXT</p></font></div>

  </div>

如果他们可以进入屏幕的每个边缘也会很好。两边仍有空间。

How it should look.

我希望它看起来像这样，让颜色一直到屏幕的边缘。我好几个小时都没有。

提前致谢。

Answer 1

你可以使用flex和一些CSS颜色：

body {
 margin:0;
}

/* I added an extra element as the container so you may consider an existing element in your site */
.container {
  display: flex;
  height: 100vh; /* change this value to the height needed (ex: 100px) */
  margin: 0;
  flex-direction: column;
}

.message1 {
  flex: 1;
  align-items: center;
  display: flex;
  background-color: #f0f0f0;
  padding-left: 20px;
}

.message2 {
  flex: 1;
  align-items: center;
  display: flex;
  background-color: #3a3a3a;
  padding-left: 20px;
}

a {
  color: #000;
  /*Change color of link*/
}

p {
  color: #fff;
  /*change color of text*/
}

<div class="container">
  <div class="message1">
    <div class="messagetext">
      <p class="Roboto"><a href="URL">URL TEXT</a></p>
    </div>
  </div>
  <div class="message2">
    <div class="messagetext">
      <p class="Roboto">TEXT</p>
    </div>
  </div>
</div>

Answer 2

我不确定你为什么使用字体标记，在HTML5中它已被弃用，但这里是你想要使用的代码。

<style>
  * {
    margin: 0;
    padding: 0;
  }
  
  .message1 {
    height: 100px;
    width: 100%;
    background-color: #f0f0f0;
  }
  
  .message2 {
    height: 100px;
    width: 100%;
    background-color: #3a3a3a;
  }
  
  .messagetext {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-left: 20px;
    padding: 0px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
  
  a {
    text-decoration: none;
    color: purple;
  }
</style>

<div class="message1">

  <div class="messagetext">
    <font size="4" color="#6d1a76">
      <p class="Roboto"><a href="URL">URL</a></p>
    </font>
    </a>
  </div>

</div>

<div class="message2">

  <div class="messagetext">
    <font size="3" color="#ffffff">
      <p class="Roboto">TEXT</p>
    </font>
  </div>

</div>

Answer 3

首先是一些通用编码实践：

（假设这不是复制粘贴错误）您的CSS不需要多个<style>标记。
您在html字体标签上所做的所有工作都可以在CSS中轻松处理。这样可以更轻松地编辑和查看您正在执行的操作。从你的大小调整到css中使用的内容有一点转换。我使用了这个答案：How to convert to px?
您的HTML标记未正确嵌套。该规则是“首次开放，最后关闭”。您的message1 div包含一个段落和一组锚定的标记，这些标记是相互嵌套的，而不是正确嵌套的。

第一版，主要是清洁：

<style>
  .message1 {
    height: 100px;
    width: 100%;
    background-color: #f0f0f0;
    font-size: 1.13em;
    color: #6d1a76;
  }

 .message2 {
    height: 100px;
    margin-top: 50px;
    width: 100%;
    background-color: #3a3a3a;
    font-size: 1em;
    color: #ffffff;
  }

 .messagetext {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-left: 20px;
    padding: 0px;
  }
</style>


<div class= "message1">
   <div class= "messagetext">
      <p class="Roboto">
         <a href="URL">URL TEXT</a>
      </p>
   </div>
</div>

<div class= "message2">
   <div class= "messagetext">
      <p class="Roboto">TEXT</p>
   </div>
</div>

好的，既然这更具可读性，让我们开始更改你的CSS以获得你想要的实际输出。

您的顶部div和底部div之间的差距是因为您要添加到类.message2，margin-top: 50px;的边距。边距增加了应用元素与周围元素之间的距离。在这种情况下，它将一切都从顶部推开，包括.message1 div。
浏览器中关于HTML的一个非常有趣的事情是，我们可以“免费”将一些样式应用于我们的元素，或者在没有我们明确要求的情况下使用它们。这就是为什么链接看起来像他们这样做的原因以及为什么在删除margin-top: 50px;之后我们仍然在div之间留有空格这可以通过reset.css文件完成（有关详细信息，请参阅：CSS reset - What exactly does it do? ）。为了做到这一点，我为此增加了一点重置。我已将div，p和a的填充和边距（此html中使用的三个元素）设置为0.这是样式标记中的第一个样式。注意元素名称之间的逗号：您可以一次将多组元素应用于一组样式：）
要消除链接上的那种颜色，我们需要添加另一个重置位。为此，我们将创建另一个样式规则，这次仅用于标记。我们将text-decoration: none;设置为删除下划线。接下来，我们将color: #6d1a76;设置为理顺。
您不需要该messagetext类，因为您只是使用它来设置div的内容边距。相反，添加padding-left：20px;到你的message1和message2类。外部元素上的填充将内部元素推离父元素的边缘。在这种情况下，相同的效果是为内部元素添加边距。
最后，我们需要将文本垂直居中。有几种方法可以做到这一点，但最好的（IMO至少）使用CSS flex。对于这两个消息div，我们将添加两种样式：display: flex;和align-items: center;来修复：

新版本：

<style>
   div, p, a {
     margin: 0;
     padding: 0;
   }

   a {
     text-decoration: none;
     color: #6d1a76;
   }
   .message1 {
     height: 100px;
     width: 100%;
     background-color: #f0f0f0;
     font-size: 1.13em;
     color: #6d1a76;
     margin: 0;
     padding-left: 20px;
     display: flex;
     align-items: center;
   }

  .message2 {
     height: 100px;
     width: 100%;
     background-color: #3a3a3a;
     font-size: 1em;
     color: #ffffff;
     margin: 0;
     padding-left: 20px;
     display: flex;
     align-items: center;
   }
 </style>


 <div class= "message1">
    <p class="Roboto">
      <a href="URL">URL TEXT</a>
    </p>
 </div>

 <div class= "message2">
    <p class="Roboto">TEXT</p>
 </div>

你可以做更多的工作来清理你的CSS，所以你不会重写那么多样式：

<style>
   div, p, a {
     margin: 0;
     padding: 0;
   }

   a {
     text-decoration: none;
     color: #6d1a76;
   }

   div {
     height: 100px;
     width: 100%;
     padding-left: 20px;
     display: flex;
     align-items: center;
   }

   .message1 {
     background-color: #f0f0f0;
     font-size: 1.13em;
     color: #6d1a76;
   }

  .message2 {
     background-color: #3a3a3a;
     font-size: 1em;
     color: #ffffff;
   }
 </style>


 <div class= "message1">
    <p class="Roboto">
      <a href="URL">URL TEXT</a>
    </p>
 </div>

 <div class= "message2">
    <p class="Roboto">TEXT</p>
 </div>

允许div占据全宽＆amp;垂直居中的文字，使用另一个div

3 个答案: