如何设置显示为圆形的div的垂直对齐？答案

【问题标题】：how to set vertical alingn of a div shown as circle?如何设置显示为圆形的div的垂直对齐？
【发布时间】：2013-11-01 06:13:25
【问题描述】：

这是我创建的：

这就是我想要的：

这是我的代码：

<div id="OR"><span style=" vertical-align: middle;background:blue;">OR</span></div>

这是css：

div #OR { border-radius:50%;border-style:1px solid black;background:red;width:42px;height:42px;float:right; background:red;vertical-align: middle;}
div #OR span{ vertical-align: middle; }

所以请帮我把 thart OR 放在 div 的中心。

【问题讨论】：

标签： html css css-position vertical-alignment

【解决方案1】：

我认为 OR 文本不需要额外的元素，您需要的是 line-height 属性

Demo

div {
    height: 50px;
    width: 50px;
    border: 1px solid #ddd;
    border-radius: 50%;
    font-weight: bold;
    line-height: 50px; /* Equals elements height */
    text-align: center;
}

如果你想vertical-align单个词，这个解决方案是完美的，如果你想完美地水平和垂直居中元素，其他两种方法是使用display: table-cell;和vertical-align: middle;或使用CSS定位。

CSS定位方式..

解释：这里我在包装器/父元素上使用position: relative;，而不是为子元素分配position: absolute;。不过，这里有一个问题，您需要为要居中的子元素分配固定宽度。

Demo 2

div {
    height: 50px;
    width: 50px;
    border: 1px solid #ddd;
    border-radius: 50%;
    font-weight: bold;
    position: relative;
}

div span {
    position: absolute;
    border: 1px solid #f00;
    left: 50%;
    top: 50%;
    height: 20px;
    width: 24px;
    margin-top: -10px; /* Half of the elements height */
    margin-left: -12px; /* Half of the elements width */
}

【讨论】：