Question

我创建了一个圆形分区，里面有文字。问题是文本粘在圆的顶部我希望文本垂直居中。我的文字不会超过5个字符。

$('select').change(function() { 
    $('input').val($(this).find('option:selected').data('name'));
});

.circle {
     background-color:#000;
     color:white;
     height:150px;
     width:150px;
     border-radius:50%; 
}

Answer 1

定义此属性

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

＆＃13;

.circle { 
     background-color:#000;
     color:white;
     height:150px;
     width:150px;
     border-radius:50%;
     text-align:center;
     display:table-cell;
     vertical-align:middle;
}

＆＃13;

<center><div class='circle'>hello</div></center>

＆＃13;

Answer 2

使用.circle { background-color:#000; color:white; height:150px; line-height:150px; width:150px; border-radius:50%; }使其垂直居中。使文本垂直居中，使行高等于其高度。

<center><div class='circle'>hello</div></center>

Answer 3

这是一个小提琴：

FIDDLE

只需要显示为表格单元格并定义其垂直对齐

.circle {
    background-color: #000;
    color: white;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    display: table-cell;
    vertical-align: middle
}

Answer 4

<center>已被弃用，不应再使用。建议使用其他定心方法。

至于将文本居中放在圆圈中，flexbox可以这样做：

.circle {
  background-color: #000;
  color: white;
  height: 150px;
  width: 150px;
  margin: 1em auto;
  border-radius: 50%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class='circle'>hello</div>

如何在圆形分区中垂直居中文本？

4 个答案: