2

I have a div and I would like to align a span element inside it. The span element should be aligned bottom and horizontally center of its parent div.

<div style="position: relative; clear: both; float: left; border: 2px solid #999999; padding:0; margin:1px; width: 60px; height: 60px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; background: url(/img/img60x60.gif) no-repeat;">
      <span style="border: none; background-color: green; margin: 0; padding: 0; border: 0; position: absolute; margin-left: auto; margin-right: auto; bottom: 0;">&nbsp;&nbsp;123.&nbsp;&nbsp;</span></div>

At the same time, the alignment of my span element is not working. The width of the span element will change all the time. I mean that it is not a fixed width element.

I'm looking for help with this, and a cross-browser solution. No JavaScript/jQuery allowed.

TylerH
  • 20,799
  • 66
  • 75
  • 101
xms
  • 429
  • 5
  • 24

6 Answers6

3
.holder {    
  display: table;
  border: 2px solid #999999; 
padding:0; 
margin: 1px; 
width: 60px; 
height: 60px; 
border-radius: 50%; 
-webkit-border-radius: 50%; 
-moz-border-radius: 50%; 
background: #00ff00;
}

.some {
display: table-cell;
vertical-align: bottom;
text-align: center;
border: none;

}

<div class="holder">
<span class="some">
123.
</span>
</div>
ashok
  • 69
  • 5
2

Something like this?

.holder {
  display: table;
  border: 2px solid #999999; 
  padding:0; 
  margin: 1px; 
  width: 60px; 
  height: 60px; 
  border-radius: 50%; 
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%; 
  background: #00ff00;
}

.some {
  display: table-cell;
  vertical-align: bottom;
  text-align: center;
  border: none; 
}
<div class="holder">
  <span class="some">
    123.
  </span>
</div>
Hardy
  • 5,590
  • 2
  • 18
  • 27
  • The span element should be aligned bottom and horizontally center of its parent div. The width of a span element is related to its contents, no 100% of div or fixed width. – xms Aug 09 '16 at 20:59
  • A: span element is aligned bottom and centered B: don't know what you mean about latter.. – Hardy Aug 09 '16 at 21:03
2

There is no padding added in firefox. The space on either side of the text is in this case set by the   in the span tag, so the varying results you are getting are probably due to font rendering differences between browsers. Using a CSS Reset should take care of that. Try this:

<div style="border: 2px solid #999999; padding:0; margin:1px; width: 60px; height: 60px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; background: url(/img/img60x60.gif) no-repeat;">
  <span style="background-color: green; display:inline-block; margin-top:45px;margin-left:16px;">123.</span></div>

Also, looking at the code, it looks like you are using a WYSIWYG editor which tends to inline css rules and space text by adding &nbsp html entities instead of using horizontal padding and text-align:center;. I would recommend adding these rules in a class and using an external css stylesheet for better performance.

Denis Kumbaradzi
  • 294
  • 1
  • 7
1

Flexbox can do that:

div {
  float: left;
  border: 2px solid #999999;
  padding: 0;
  margin: 1px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
}
<div>
  <span>&nbsp;&nbsp;123.&nbsp;&nbsp;</span>
</div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
0

Use this CSS on the span:

.y {
  display: inline-block;
  background-color: green;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0px;
}

The bottom "alignment height" can be adjusted with the bottom parameter.

BTW: There is no padding around the span, that's just the line height, and the non-breaking spaces you put in yourself.

.x {
  position: relative;
  clear: both;
  float: left;
  border: 2px solid #999999;
  margin: 1px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  background: url(/img/img60x60.gif) no-repeat;
}
.y {
  display: inline-block;
  background-color: green;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0px;
}
<div class="x">
  <span class="y">&nbsp;&nbsp;123.&nbsp;&nbsp;</span>
</div>
Johannes
  • 64,305
  • 18
  • 73
  • 130
0

First of all, thank you all for your help.

Finally I modified the answers of @ashok and @Hardy. I did it all this way:

    <div style="display: table-cell;
      border: 2px solid #999999;
      padding: 0;
      margin: 1px;
      width: 60px;
      height: 60px;
      text-align: center;
      vertical-align: bottom;
      border-radius: 50%; 
      -webkit-border-radius: 50%; 
      -moz-border-radius: 50%; 
      background: url(/img/img60x60.gif) no-repeat;">
        <span style="position: relative; bottom: -4px; background-color: green;">&nbsp;&nbsp;123.&nbsp;&nbsp;</span>
    </div>

It seems to me that this is working OK. I will modify the code and put my CSS code to an external file.

xms
  • 429
  • 5
  • 24