私が試し続けた後、私はh3と同じ行にdivを持つことができるいくつかの調整を行いましたが、中央にはありません。私は単純に、同じ行にh3の横にh3のテキストを垂直に配置したいと思っています(またはdivはテキストが表示されている限り重要ではありません)同じ行の見出し内
私はposition: absolute;
が問題だと思いますが、しかし、私がそれを取り除くと、数字の周りの円はもはや円ではないでしょう(そして私はそれを円に保つ必要があります) 今のように、円は同じ行に配置されますが、見出しのテキストは、ページ(1行)に十分なスペースを持っている場合
また、円とテキストの間に水平方向に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;
}
https://jsfiddle.net/9ebz77p1/クロムでうまく動作します。 – aVC
指定したhtmlは別の要素内にありますか?もしそうなら、その要素は幅と高さを持っていますか? (ほとんどのブラウザでは私のためにも動作します) –