将文本与此滑块图像对齐

Posted 2023-03-05

【中文标题】将文本与此滑块图像对齐

【英文标题】：Align text to this slider image

【发布时间】：2022-01-22 05:59:54

【问题描述】：

我正在尝试将文本与不同的图像对齐以作为滑块进行演示，问题是它取决于项目的数量并且我使用翻译文本（英语/西班牙语），我需要同时处理这两个问题无论文本有多长（通常不超过 25 个字符）。它适用于两个和三个项目，但我需要它更加动态，因为文本可能会有所不同，这只是一个测试。

图像非常大，所以我将其调整为 800 像素以完美适应我的模板不知道我是否应该更改图像或尝试适应文本内容或两者兼而有之。

这是我到目前为止所拥有的，我尝试将整个行大小划分为 % 和 px 上的每一列 例如，如果有 2 个项目，每个 col 宽度应设置为 50% 但不起作用，所以我尝试了不同的值（在本例中为两个项目 42%）但尚未对齐。

  .slider-image 
  padding: 0;
  width: 800px;


.slider-text 
  text-align: center;
  display: block;
  max-width: 960px;


.two-items .col 
  display: inline-block;
  float: none;
  /*max-width: 347px;*/
  width: 42%;


.three-items .col 
  display: inline-block;
  float: none;
  /*max-width: 260px;*/
  width: 31%;


.four-items .col 
  display: inline-block;
  float: none;
  /* max-width: 207px; */
  width: 24%;


.five-items .col 
  display: inline-block;
  float: none;
  /*max-width: 166px;*/
  width: 19%;


.header-item 
  text-align: center;
  font-size: 10.6pt;
  color: #b5d8e4;
  font-weight: 100;


.active 
  color: black !important;

<div class="container slide-height">
  <div class="row slider-text two-items ">
    <div class="col header-item active"><span class="fst-italic">Prueba</span></div>
    <div class="col header-item"><span class="fst-italic">Prueba</span> Costs</div>
  </div>

  <div class="row justify-content-center">
    <img class="slider-image" src="https://i.postimg.cc/4yDwGBHZ/indicador-2-1.png">
  </div>

  <div class="row slider-text three-items ">
    <div class="col header-item active"><span class="fst-italic">Prueba</span></div>
    <div class="col header-item"><span class="fst-italic">Prueba</span> Costs</div>
    <div class="col header-item">Prueba Costs</div>
  </div>

  <div class="row justify-content-center">
    <img class="slider-image" src="https://i.postimg.cc/MZg8XwyZ/indicador-3-1.png">
  </div>

  <div class="row slider-text four-items ">
    <div class="col header-item active"><span class="fst-italic">Prueba</span></div>
    <div class="col header-item"><span class="fst-italic">Prueba</span> Costs</div>
    <div class="col header-item">Prueba Costs</div>
    <div class="col header-item">Prueba Costs</div>
  </div>

  <div class="row justify-content-center">
    <img class="slider-image" src="https://i.postimg.cc/5NvWCr3B/indicador-cuatro-1.png">
  </div>

  <div class="row slider-text five-items ">
    <div class="col header-item active"><span class="fst-italic">Prueba</span></div>
    <div class="col header-item"><span class="fst-italic">Prueba</span> Costs</div>
    <div class="col header-item"><span class="fst-italic">Prueba</span> Costs</div>
    <div class="col header-item"><span class="fst-italic">Prueba</span> Costs</div>
    <div class="col header-item"><span class="fst-italic">Prueba</span> Costs</div>
  </div>

  <div class="row justify-content-center">
    <img class="slider-image" src="https://i.postimg.cc/QNF3XCKn/indicador-5-1.png">
  </div>
</div>

【问题讨论】：

也许您应该考虑使用 flex (developer.mozilla.org/fr/docs/Web/CSS/flex)，因为您的滑块图像不对应于 1/2、1/3、1/4，您将很难对齐文本。

【参考方案1】：

您的图片目前没有响应。 由于您使用带有.container 的响应式结构，因此您的图像应该是100% 填充.col 的宽度。

.slider-image 
    padding: 0;
    width: 100%; /*800px*/

然后，对于您个人的第 3 行和第 4 行，我会调整图像以更加对齐。到目前为止，它们开始与边缘对齐而不是居中。这是为了简单的方法...

DEMO

---

如果您可以分解图像，也许可以从中制作一个 svg（或 CSS 形状），您可以将其全部包含在具有不同变体的单个类中。

DEMO

对于形状，我在您的.header-item 中引入了一个新的div.shape。这将保持伪:before 上的子弹形状和:after 上的菱形。要解决边界问题，我们可以使用 .header-item 本身。

/* border shapes */
.header-item:before,
.header-item:after 
    bottom: 60px;
    content: '';
    position: absolute;
    width: 100%;
    z-index: -1;


/* vertical border */
.header-item:before 
    height: 30px;
    border-left: 1px solid #b5d8e4;
    left: calc(50% - 0.5px);


/* horizontal border */
.header-item:after 
    height: 0;
    border-top: 1px solid #b5d8e4;
    left: 0;


/* bullet & diamond */
.shape:before,
.shape:after 
    content: '';
    background-color: #fff;
    box-shadow: 0 0 0 1px #b5d8e4;
    display: block;
    margin: 0 auto;
    position: relative;


/* bullet */
.shape:before 
    top: 10px;
    border-radius: 50%;  
    width: 10px;
    height: 10px;


/* diamond */
.shape:after 
    top: 30px;
    width: 20px;
    height: 20px;  
    transform: rotate(45deg);


/* states */
.active .shape:before,
.active .shape:after 
    background-color: #b5d8e4;