0

これは私が作成したものです：

ここに画像の説明を入力

これは私が欲しいものです:

ここに画像の説明を入力

これは私のコードです:

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

そのORをdivの中心に持ってくるのを手伝ってください。

4

1 に答える 1

3

ORテキストに追加の要素は必要ないと思います。必要なのはline-heightプロパティです

デモ

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、要素を水平方向と垂直方向に完全に中央揃えにしたい場合に最適です。他の 2 つのアプローチは、CSS ポジショニングを使用display: table-cell;するか使用することです。vertical-align: middle;

CSSポジショニング方法..

説明: ここでは、ラッパー/親要素で使用し、子要素position: relative;に割り当てています。position: absolute;ただし、ここにキャッチがあります。中央に配置しようとしている子要素に固定幅を割り当てる必要があります。

デモ 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 */
}
于 2013-10-23T05:48:41.217 に答える