以每个点下方的标题导航

Question

描述我想要做的最好方法是使用此图像。如你所见，我有3个不同的图像作为背景（这是三个不同的Div），我想插入3个列表点（这里命名为：“LV”，“RP”，“IP”），下面有一个居中的描述/标题（这里：Lv：15，RP：16975等）。

我最大的问题是处理这些元素的居中宽度。我不知道如何解决这个关于CSS的最佳方法。

我的HTML：

<div class="package">
    <div class="item-description">
        <div class="col-md-3"><span class="title">LV</span><span class="description">15</span></div>
        <div class="col-md-3"><span class="title">RP<span><span class="description">16975</span></div>
        <div class="col-md-3"><span class="title">IP<span><span class="description">40000</span></div>
    </div>
</div>

Answer 1

你在找这样的东西吗？

它使用了很多元素（可能会被转换为伪元素），但它显示了您可能正在寻找的概述。

此外，对于ID和类，这不应该使您难以根据需要进行更改。

＆＃13;

＆＃13;

.container {
  width: 32%;
  height: 200px;
  background: red;
  display: inline-block;
}
.container .title {
  margin-top: 100px;
  width: 32%;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  color: white;
}
#one {
  background: url(http://placekitten.com/g/300/300);
}
#two {
  background: url(http://placekitten.com/g/200/200);
}
#three {
  background: url(http://placekitten.com/g/300/200);
}

＆＃13;

<div id="one" class="container">
  <div class="title">200
    <div class="desc">I'm a very long description</div>
  </div>
  <div class="title">300
    <div class="desc">desc</div>
  </div>
  <div class="title">400
    <div class="desc">Be More Dog</div>
  </div>
</div>
<div id="two" class="container">
  <div class="title">200
    <div class="desc">desc</div>
  </div>
  <div class="title">300
    <div class="desc">I'm a tree.</div>
  </div>
  <div class="title">400
    <div class="desc">What is a description?</div>
  </div>
</div>
<div id="three" class="container">
  <div class="title">200
    <div class="desc">desc</div>
  </div>
  <div class="title">300
    <div class="desc">a description of what?</div>
  </div>
  <div class="title">400
    <div class="desc">Don't you like, er, trees?</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

---

这可能也有效：

注意：我在这里使用了伪效果，但要保持我的代码最小化，而不是将其应用于单个项目（就像你个人一样）我只是使用了一个现有项目。

＆＃13;

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
}
.sec {
  width: 33%;
  height: 200px;
  background: red;
  background: url(http://placekitten.com/g/200/200);
  position: relative;
  text-align: center;
  color: white;
  vertical-align: middle;
  display: inline-block;
  line-height: 200px;
  margin-left: -0.5%;
}
.col {
  width: 32%;
  margin-left: -0.5%;
  font-size: 25px;
  display: inline-block;
  position:relative;
}

.col:after{
  padding-top:25px;
  font-size: 10px;
  position:absolute;
  content:"description";

  left:25%;
  }

＆＃13;

<div class="sec">
  <div class="col">
    title
  </div>
  <div class="col">
    title2
  </div>
  <div class="col">
    title3
  </div>
</div>


<div class="sec">
  <div class="col">
    title
  </div>
  <div class="col">
    title2
  </div>
  <div class="col">
    title3
  </div>
</div>


<div class="sec">
  <div class="col">
    title
  </div>
  <div class="col">
    title2
  </div>
  <div class="col">
    title3
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在你的css中试试这个

.description, .title{float:left; width:100%; text-align:center;}