Question

Demo

 .subject_container
 {
  width: 200px;
  height: 250px;
  border: 1px solid #eee;
  display: table-cell;
 }

 .subject
 {
  border-radius: 50%;
  border: 1px solid #653;
  width: 175px;
  height: 175px;
  margin: auto; 
  margin-top: 25%;
  position: relative;
 }

 .subject div 
 { 
   text-align: center;
  }

我可以理解我的内容AB DE VILLIERS/IKER CASSILAS仅在.subject div内。但我正在使用border-radius:50%使我的div成为循环。我如何在圆形div中包含我的内容？即使我改变了div的大小，我也希望解决方案能够正常工作。

有什么建议吗？

Answer 1

试试这个：

.subject div
{ 
    text-align: center;
    position:relative;
    top:50%;    
}

Answer 2

您需要在新div中包装subject_name和subject_completion。所以，将绝对中心应用于此div。为此，将以下样式添加到新div：

.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

另外，如果需要，你应该为.wrapper声明高度和宽度。

Answer 3

尝试这种方法：

.subject div
{ 
    display: table-cell;
    text-align: center;
    vertical-align:middle;
    height: 175px;
}

Demo

使用overflow:hidden;

Demo

Answer 4

您需要在.subject中添加line-height并将其设置为.subject的相同宽度和高度。然后你需要用另一个div将你的内容包装在你的.subject中。然后将以下CSS应用于它：

.subject_wrapper
{
    line-height: normal;
    display: inline-block;
    vertical-align: middle;
}

jsFiddle示例：here

编辑：如果您希望在文本尝试溢出时更改font-size，则需要使用JavaScript。有关如何执行此操作的示例帖子：Auto-size dynamic text to fill fixed size container

编辑2：如果你只想要溢出：隐藏;应用于圆圈之外的任何东西只需添加溢出：隐藏;到.subject。

示例：http://jsfiddle.net/trLhdj4e/3/

对齐圆形div内的内容

4 个答案: