时间戳

首页 > 解决方案 > 如何对齐容器边缘的元素并保持文本对齐而不重叠？

html - 如何对齐容器边缘的元素并保持文本对齐而不重叠？

问题描述

我正在尝试创建一个在右上角有一个小标签的容器（如span下面代码的绿色），我不希望它覆盖文本。文本必须垂直居中。

使用position: absolute文本被覆盖，使用float: right我无法在中心对齐文本。我怎样才能做到这一点？

这是我的尝试：

  1. 使用position: absolute

<div class="container">
  <div class="item-1"></div>
  <div class="item-2">
    <span class="sub-item-1"></span>
    <span class="sub-item-2">Centered text</span>
 </div>
</div>
<br>
<div class="container">
  <div class="item-1"></div>
  <div class="item-2">
    <span class="sub-item-1"></span>
    <span class="sub-item-2">Centered text one two three four five six seven</span>
 </div>
</div>

<style>
  .container {
    position: relative;
    min-height: 50px;
    width: 200px;
    border: 2px solid red;
    display: flex;
    align-items: flex-start; 
  }

  .item-1 {
    height: 40px;
    min-width: 60px;
    border: 1px solid blue;
    align-self: center;
  }

  .item-2 {
    width: 100%;
    align-self: center;
  }

  .sub-item-1 {
    height: 10px;
    min-width: 35px;
    border: 2px solid green;
    margin-top: -2px;
    margin-right: -2px;
    position: absolute;
    top: 0;
    right: 0;
  }
</style>

  1. 使用float: right

<div class="container">
  <div class="item-1"></div>
  <div class="item-2">
    <span class="sub-item-1"></span>
    <span class="sub-item-2">Centered text</span>
 </div>
</div>
<br>
<div class="container">
  <div class="item-1"></div>
  <div class="item-2">
    <span class="sub-item-1"></span>
    <span class="sub-item-2">Centered text one two three four five six seven</span>
 </div>
</div>

<style>
  .container {
    position: relative;
    min-height: 50px;
    width: 200px;
    border: 2px solid red;
    display: flex;
    align-items: flex-start; 
  }

  .item-1 {
    height: 40px;
    min-width: 60px;
    border: 1px solid blue;
    align-self: center;
  }

  .item-2 {
    width: 100%;
  }

  .sub-item-1 {
    height: 10px;
    min-width: 35px;
    border: 2px solid green;
    margin-top: -2px;
    margin-right: -2px;
    float:right;

  }
</style>

标签： htmlcss

解决方案

希望它能主要解决您的问题-

<div class="container">
  <div class="item-1"></div>
  <div class="item-2">
    <span class="sub-item-1"></span>
    <span class="sub-item-2">Centered text</span>
 </div>
</div>
<br>
<div class="container">
  <div class="item-1"></div>
  <div class="item-2">
    <span class="sub-item-1"></span>
    <span class="sub-item-2">Centered text one two three four five six seven</span>
 </div>
</div>

<style>
  .container {
    position: relative;
    height: 50px;
    width: 200px;
    border: 2px solid red;
    display: flex;
    align-items: flex-start; 
  }

  .item-1 {
    height: 40px;
    min-width: 60px;
    border: 1px solid blue;
    align-self: center;
  }

  .item-2 {
    width: 100%;
    height: 100%;
  }

  .sub-item-1 {
    height: 10px;
    min-width: 35px;
    border: 2px solid green;
    margin-top: -2px;
    margin-right: -2px;
    float:right;

  }
  .sub-item-2 {
    margin: auto 0;
    vertical-align: middle;
    height: 100%;
  }
  .sub-item-2:after {
    content:"";
   width: 1px;
   display: inline-block;
  height: 100%;
  vertical-align: middle;
  }
</style>

推荐阅读