同じ行の見出し内

Question

私が試し続けた後、私はh3と同じ行にdivを持つことができるいくつかの調整を行いましたが、中央にはありません。私は単純に、同じ行にh3の横にh3のテキストを垂直に配置したいと思っています（またはdivはテキストが表示されている限り重要ではありません）

私はposition: absolute;が問題だと思いますが、しかし、私がそれを取り除くと、数字の周りの円はもはや円ではないでしょう（そして私はそれを円に保つ必要があります） 今のように、円は同じ行に配置されますが、見出しのテキストは、ページ（1行）に十分なスペースを持っている場合

または下、見出しテキストは

（原因が長すぎることに）2行になった場合

また、円とテキストの間に水平方向に10ピクセルを追加します。

私はこのHTMLを使用

：

<h3> <div class="numberCircle"> 
<div class="content">24</div> </div>Smallest Personal Computer - Micro Mote </h3> 

と、このCSS：H3のための

.numberCircle { 
    border-radius: 50%; 
    -webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.2); 
    -moz-box-shadow: 3px 3px 4px rgba(0,0,0,0.2); 
    width: 50px; 
    padding: 8px; 
    font-size: 32px; 
    line-height: 1em; 
    border: 2px solid #666; 
    position: relative; 

} 
.numberCircle:before{ 
    content:""; 
    display:block; 
    margin-top:100%; 
} 
.numberCircle .content { 
    position: absolute; 
    left: 0; 
    top: 50%; 
    width: 100%; 
    text-align: center; 
    transform: translateY(-50%); 
} 

：

h3 { 
    line-height: 1.17391em; 
    color: #242d36; 
    font-family: "PT Serif", Georgia, Times, serif; 
    font-size: 23px; 
    margin: 27px 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    vertical-align:middle; 
} 

Answer 1

あなたは簡単にそれはあなたのHTMLビットを変更し、移動を達成することができますflexboxをラッパーに接続します。

.numberCircle { 
 
    border-radius: 50%; 
 
    -webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.2); 
 
    -moz-box-shadow: 3px 3px 4px rgba(0,0,0,0.2); 
 
    width: 50px; 
 
    padding: 8px; 
 
    font-size: 32px; 
 
    line-height: 1em; 
 
    border: 2px solid #666; 
 
    position: relative; 
 

 
} 
 
.numberCircle:before{ 
 
    content:""; 
 
    display:block; 
 
    margin-top:100%; 
 
} 
 
.numberCircle .content { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 50%; 
 
    width: 100%; 
 
    text-align: center; 
 
    transform: translateY(-50%); 
 
} 
 
h3 { 
 
    line-height: 1.17391em; 
 
    color: #242d36; 
 
    font-family: "PT Serif", Georgia, Times, serif; 
 
    font-size: 23px; 
 
    margin: 27px 0; 
 
    vertical-align:middle; 
 
} 
 
.wrapper{ 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div class="wrapper"> 
 
    <div class="numberCircle"> 
 
    <div class="content">24</div> 
 
    </div> 
 
    <h3>Smallest Personal Computer - Micro Mote </h3> 
 
</div>

Answer 2

また、むしろテーブルを用いて、自分のためにこれを簡単に行うことができます。

CSS：

.MyTable { 
    width: 300px; 
} 

.MyTable tr td { 
    vertical-align: middle; 
} 

.circle { 
    background: red; 
    width: 40px; 
    height: 40px; 
    text-align: center; 
    position: relative; 
    display: inline-block; 
    border-radius: 100%; 
    border: 1px solid black; 
    padding: 10px; 
    font-size: 32px; 
} 

.text { 
    background: green; 
    font-family: "PT Serif", Georgia, Times, serif; 
    font-size: 23px; 
} 

HTML：このうち

チェックこれにより

<table class="MyTable"> 
    <tr> 
     <td> 
      <div class="circle"> 
       24 
      </div> 
     </td> 
     <td class="text"> 
      Smallest Personal Computer - Micro Mote 
     </td> 
    </tr> 
</table> 

は、あなたが「ラインheigtを心配する必要があり、それらすべてはありませんそれはぎこちない "ものだ。フォントサイズを変更しても、テキストを完全に中央に置くことができます。