CSS和定位span內的span元素

我有一個div，我想在它內部對齊span元素。 span元素應該對齊其父div的底部和水平中心。CSS和定位span內的span元素

<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>

與此同時，我的span元素的排列是行不通的。 span元素的寬度將一直改變。我的意思是它不是固定寬度的元素。

我正在尋找這方面的幫助，以及跨瀏覽器的解決方案。沒有JavaScript/jQuery允許。

來源

2016-08-09 xms

你在說什麼填充？我沒有看到任何。 – TylerH

@TylerH我同意，我的錯誤。 – xms

這樣的事情？

.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>

來源

2016-08-09 20:55:08 Hardy

span元素應該對齊其父div的底部和水平中心。 span元素的寬度與其內容有關，不是div的100％或固定寬度。 – xms

答：span元素對齊底部並居中 B：不知道你對後者的意思.. – Hardy

Flexbox，就可以做到這一點：

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>

來源

2016-08-09 21:00:52

你知道爲什麼Firefox給span元素添加填充嗎？ – xms

你指的是什麼填充？ –

使用此CSS上跨度：

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

可以使用bottom參數調整底部「對齊高度」。

順便說一句：在跨度周圍沒有填充物，這只是線條高度，以及您自己放置的不間斷空間。

.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>

來源

2016-08-09 21:06:23 Johannes

.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>

來源

2016-08-09 21:10:36 ashok

沒有填充在Firefox加入。文本兩邊的空間在span標記中由設置，因此您得到的不同結果可能是由於瀏覽器之間的字體渲染差異。使用CSS Reset應該照顧。試試這個：

<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>

而且，看代碼，它看起來像你使用的是所見即所得的編輯器，往往通過添加& NBSP HTML實體，而不是使用水平填充和文本對齊內聯CSS規則和空間文本：中央;。我建議在一個類中添加這些規則，並使用外部CSS樣式表來獲得更好的性能。

來源

2016-08-09 21:31:43

感謝您的信息。 – xms

首先，謝謝大家的幫助。

最後我修改了@ashok和@Hardy的答案。我所做的這一切是這樣的：

<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>

在我看來，這是工作確定。我將修改代碼並將我的CSS代碼放到一個外部文件中。

來源

2016-08-09 22:29:52 xms

CSS和定位span內的span元素

回答

相關問題