在div的底部放置一个跨度（水平位移问题）

Question

我知道一般的经验法则是在提问之前进行研究，如果有不同的来源，我会看很多。这里运气不错。

我的最终目标是让文本居中并位于div的底部。就这么简单。

但是当我使用其他来源提供的代码时，它并不以实际div为中心。

HTML：

<div class="fbox" id="breast">
        <span class="title">Breast Procedures</span>
        <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
        </ul>
<span class="read">View Descriptions</span>
    </div>
    <div class="fbox" id="facial">
        <span class="title">Facial Procedures</span>
        <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
        </ul>
<span class="read">View Descriptions</span>
    </div>
    <div class="fbox" id="body">
        <span class="title">Body Procedures</span>
        <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
        </ul>
<span class="read">View Descriptions</span>
    </div>
    <div class="fbox" id="surgery">
        <span class="title">Non-Surgical Procedures</span>
        <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
        </ul>
<span class="read">View Descriptions</span>
    </div>

CSS：

.title{
    font-size:16px;
    margin:0 auto;
text-align:center;
font-weight:600;
}
.fbox{
width: 250px;
height: 300px;
background: rgb(250, 250, 250);
-moz-box-shadow:  0px 0px 5px 1px rgb(139, 139, 139);
-webkit-box-shadow:  0px 0px 5px 1px rgb(139, 139, 139);
box-shadow:  0px 0px 5px 1px rgb(139, 139, 139);
display:inline-block;
vertical-align:top;
text-align:center;
margin:0 auto;
position:relative;
}
.main-content ul li{
    list-style-type:none;
}
.main-content ul{
    margin:0 auto;
}
.read{
    height:40px;
    width:250px;
 position:absolute;
    bottom:0;
}

JSFiddle

感谢所有帮助！

Answer 1

你太近了！

<强> SOLUTION：

替换：

.read {
  height: 40px;
  width: 250px;
  position: absolute;
  bottom: 0;
}

使用：

.read {
  height: 40px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

CODE SNIPPET

.title {
  font-size: 16px;
  margin: 0 auto;
  text-align: center;
  font-weight: 600;
}
.fbox {
  width: 250px;
  height: 300px;
  background: rgb(250, 250, 250);
  -moz-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
  -webkit-box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
  box-shadow: 0px 0px 5px 1px rgb(139, 139, 139);
  display: inline-block;
  vertical-align: top;
  text-align: center;
  margin: 0 auto;
  position: relative;
}
.main-content ul li {
  list-style-type: none;
}
.main-content ul {
  margin: 0 auto;
}
.read {
  height: 40px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

<div class="fbox" id="breast">
  <span class="title">Breast Procedures</span>
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
  <span class="read">View Descriptions</span>
</div>
<div class="fbox" id="facial">
  <span class="title">Facial Procedures</span>
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
  <span class="read">View Descriptions</span>
</div>
<div class="fbox" id="body">
  <span class="title">Body Procedures</span>
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
  <span class="read">View Descriptions</span>
</div>
<div class="fbox" id="surgery">
  <span class="title">Non-Surgical Procedures</span>
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
  <span class="read">View Descriptions</span>
</div>

<强> JSFiddle