以最小和最大长度和单个标签居中内容答案

【问题标题】：Center content with min and max length and single tag以最小和最大长度和单个标签居中内容
【发布时间】：2020-10-17 04:31:53
【问题描述】：

单标签可以达到下面相同的效果代码吗？

规格是：

内容具有最小和最大宽度。
如果视口的宽度小于内容的最大宽度，则内容采用视口。
如果视口大于内容最大宽度，则内容必须居中。
底部边框始终占据视口宽度的 100%。

好吧，我想这可能是不可能的，因为 centerer 和它的 parent 颜色不同，所以我将删除不同颜色的条件。

.Component {
    background: #FFCC80;
    border-bottom: 1px solid #283593;
}

.Centerer {

  min-width: 100px;
  max-width: 300px;
  width: 100%;
  margin: 0 auto;
  
  /* ↓ Does not matter */
  background: #81D4FA;
  height: 40px;
}

<div class="Component">
  <div class="Centerer">
    
  </div>
</div>

【问题讨论】：

嗨，你到底需要什么？请再次陈述您的问题。我运行了代码 sn-p，它看起来居中。
简单删除父div.Component
@AlePlo，我编辑了我的问题。对您的问题的简短回答：我需要与 sn-p 中相同的显示，但使用一个标签而不是两个标签。
@Chaska，谢谢你的回答。我把问题复杂了一点。

标签： html css layout

【解决方案1】：

是的，如下所示：

.Centerer {
  padding: 0 calc((100% - 300px)/2);
  min-width: 100px;
  background: 
   linear-gradient(#81D4FA 0 0) content-box, 
   #FFCC80;
  border-bottom: 1px solid #283593;
  box-sizing: border-box;
  

  height: 40px;
}

<div class="Centerer">
  some text here
</div>

【讨论】：

这是我的 CSS 问题的第五个解决方案。 CSS中有什么你不能做的吗？我不这么认为。