絶対位置と中央揃えのテキストの組み合わせ

Question

div内に3つのテキスト要素を配置する際に問題があります。

は、ここで私は簡素化

タスクを、達成したいものです。

1. センター内の数は関係なく、それがどのように広い、センタリングれてはなりません。 （自動センタリング）
2. 下記の数は以下の文字が右

私の考えである必要があります左

上にある必要があります：

1. は内数のための子育てのコンテナを作成します。中心
2. 番号を含むブロック要素を配置します。必要に応じて自動的に中央に配置されます。
3. 012内の他の要素の絶対位置付けを行います。

私は何を私が得たことは、この混乱である

<div class="ioitem ioitem1"> 
    <div class="numberContainer"> 
     <div class="number">1</div> 
     <div class="width">3</div> 
     <div class="base">D</div> 
    </div> 
</div> 

スタイル

.ioitem { 
    display: inline-block; 
    background-color: white; 
    height: 30px; 

    margin: 0px 10px 10px 0px; 
    padding: 0px 0px 0px 0px; 

    position: relative; 
} 
.ioitem1 { width: 30px; } 
.ioitem > .numberContainer { 
    font-size: 12px; 
    font-weight: bold; 

    position: absolute; 
    top: 0; 
    left: 0; 
} 
.ioitem > .number { 
    display: block; 
    margin: auto; 
    text-align: center; 
} 

次のコードを使用：

中心になるように数イマイチ中心に置かれ、かなり多くのものがあります私が望むように配置されていません。私は簡潔にするためにいくつかのCSSを省略しました。

どうすれば希望の結果を得ることができますか？ステップのリストで十分です。

頭痛の原因になるのは、.numberのテキストを自動的にセンタリングすることです。

Answer 1

表のセルにvertical-align機能があるので、このCSS表のレイアウトを試してください。注意してください、私はHTMLタグを少し並べ替え、中央に番号を入れてください。

body { 
 
    background: silver; 
 
} 
 
.numberContainer { 
 
    background: white; 
 
    display: table; 
 
    table-layout: fixed; 
 
    height: 90px; 
 
    width: 90px; 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
} 
 
.width, .number, .base { 
 
    display: table-cell; 
 
    text-align: center; 
 
} 
 
.width, .base { 
 
    vertical-align: bottom; 
 
} 
 
.number { 
 
    vertical-align: middle; 
 
    font-size: 60px; 
 
    color: orange; 
 
}

<div class="ioitem ioitem1"> 
 
    <div class="numberContainer"> 
 
    <div class="width">3</div> 
 
    <div class="number">1</div> 
 
    <div class="base">D</div> 
 
    </div> 
 
</div>

jsFiddle

Answer 2

このコードを試してください。 http://codepen.io/nehemc/pen/LkyJYN

<style> 
.ioitem { display: inline-block; background: #C03; height: 200px; margin: 0px 10px 10px 0px; padding: 0px 0px 0px 0px; position: relative; width:200px; color:#fff; } 
.number { position:absolute; left:0; right:0; top:0; bottom:0; height:10px; margin:auto; text-align:center; } 
.width { position:absolute; left:20px; bottom:20px; height:10px; margin:auto; text-align:center; background:#fff; padding:10px; color:#000; } 
.base { position:absolute; right:20px; bottom:20px; height:10px; margin:auto; text-align:center; background:#fff; padding:10px; color:#000; } 
</style> 

<div class="ioitem ioitem1"> 
    <div class="number">1</div> 
    <div class="width">1</div> 
    <div class="base">1</div> 
</div> 

Answer 3

はここに働くカップルのアプローチがあります - 最初のものは、すべてあなたのHTMLを変更する必要があり、位置へ先頭にしたい番号を設定することではありません。絶対、その後、それをあなたが行きたい場所に変えてください。あなたがいないたく使用位置行う場合

<style> 
    .numberContainer { 
     position: relative; 
     display: inline-block; 
    } 
    .numberContainer div{ 
     width: 30px; 
     display: inline-block; 
    } 
    .numberContainer .number{ 
     position: absolute; 
     left: 50%; 
     transform: translate(calc(-50% - 0.1em), -50%); 
    } 
    </style> 
    <div class="ioitem ioitem1"> 
     <div class="numberContainer"> 
      <div class="number">1</div> 
      <div class="width">3</div> 
      <div class="base">D</div> 
     </div> 
    </div> 

また、：あなたの内容に、絶対に、あなたは自分の図と一致するように、HTMLの順序を反転し、そのように行うことができます。

<style> 
    .numberContainer { 
     position: relative; 
     display: inline-block; 
    } 
    .numberContainer div{ 
     width: 30px; 
     display: inline-block; 
    } 
    .numberContainer .number{ 
     transform: translate(calc(-50% - 0.1em), -50%); 
    } 
    </style> 
    <div class="ioitem ioitem1"> 
     <div class="numberContainer"> 
      <div class="width">3</div> 
      <div class="number">1</div> 
      <div class="base">D</div> 
     </div> 
    </div> 

うまくいけば、必要なものは1つです。