Question

我在背景图片中有一个数字。我不能把数字放在圆圈的中心。到目前为止，我的数字居中，但它位于圆圈的最顶端。如何将其移至中心？

HTML code：

<div class="number">
  <p>
  576
  </p>
</div>

CSS代码：

.number{
    float:left;
    background-position: center;
    text-align: center;
    font-size:200%; 
    }

.number p{  
    position:relative;
    top: 38%;
    left:57%;
    z-index:999;    
    background-image: url("http://davidwalsh.name/demo/css-circles.png");
    width: 207px;
    height: 204px;
    }

Here是jsfiddle

Answer 1

您需要做的就是为您的line-height元素设置p，例如line-height: 204px;，这相当于元素高度。

Demo

.number p {
    /* Other properties here */
    line-height: 204px; /* add this */
}

此外，我不知道您为什么在top属性中使用left和z-index属性，我认为您可以在很大程度上清理混乱。

Answer 2

现在检查你的fiddel。https://jsfiddle.net/ydz8cn7b/1/

我已根据您的要求更新了它：

<强> HTML

<div class="number">
    <p>576</p>
</div>

<强> CSS

.number {
    float:left;
    background-position: center;
    text-align: center;
    font-size:200%;
    display:table;
}
.number p {
    display:table-cell;
    background-image: url("http://davidwalsh.name/demo/css-circles.png");
    width: 207px;
    height: 204px;
    vertical-align:middle;
}

Answer 3

使用line-height: 204px

当文本由单行

组成时，此选项适用

＆＃13;

.number{
	float:left;
	background-position: center;
	text-align: center;
	font-size:200%;	
	}
	
.number p{	
	position:relative;
	top: 38%;
	left:57%;
	z-index:999;	
	background-image: url("http://davidwalsh.name/demo/css-circles.png");
	width: 207px;
	height: 204px;
    line-height: 204px;
	}

＆＃13;

<div class="number">
	<p>
   	576
   	</p>
   	</div>

＆＃13;

Answer 4

一个好的解决方案是

display: table-cell;
vertical-align: middle;

检查Fiddle

Answer 5

在此课程productName = (typeof(productName) != 'undefined' && productName != '') ? productName : ''; userId = (typeof(userId) != 'undefined' && userId != '') ? userId : ''; settingsData = (typeof(settingsData) != 'undefined' && settingsData != '') ? settingsData : ''; $.ajax({ type : "GET", dataType: "json", url : baseUrl + url, data : { productColumnName : productName, targetId : userId, settingsData : settingsData } }).done(function( response ) { checkLogout(response); location.reload(); }).fail(function() { location.reload(); });

中添加以下CSS属性

for i in range(len(text)):
    print(type(text[i]))
    if type(text[i]) != str:
        print(text[i],'Not String')
    else:
        print(text[i],'String')

css在背景图像中居中文本

5 个答案: