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

Question

I know the general rule of thumb is research before asking questions, and I'm looking at a lot if different sources. Not to much luck here.

My end goal is to have the text centered and at the bottom of the div. Simple as that.

But when I use the code given by other sources, it's not centered in the actual 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

All help is appreciated!

Answer 1

You were so close!

SOLUTION:

Replace:

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

With:

.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