在同一行的标题内垂直 div
Posted
技术标签:
【中文标题】在同一行的标题内垂直 div【英文标题】:vertically div inside heading on the same line 【发布时间】:2017-03-30 19:28:53 【问题描述】:在我不断尝试之后,我做了一些调整,让我可以让 div 与 h3 在同一行,但它没有居中。我只是想让 div 在同一行,在 h3 旁边,垂直居中 h3 文本(或 div,只要文本出现就没有关系。
我猜position: absolute;
是个问题,但如果我删除它,数字周围的圆圈将不再是圆圈(我需要保持圆圈)
就像现在一样,圆圈将位于同一行,但它垂直对齐顶部,如果标题文本在页面上有足够的空间(一行)
或底部,如果标题文本分两行(由于太长)
并在圆圈和文本之间水平添加 10px。
我使用这个 html:
<h3> <div class="numberCircle">
<div class="content">24</div> </div>Smallest Personal Computer - Micro Mote </h3>
还有这个css:
.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:
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;
【问题讨论】:
jsfiddle.net/9ebz77p1 在 chrome 上工作正常。 你有你在另一个元素中指定的 html 吗?如果是这样,该元素是否具有宽度和高度? (在大多数浏览器中也适用于我) 【参考方案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>
【讨论】:
【参考方案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>
有了这个,您不必担心行高以及所有那些“顽固”的东西。您将能够更改您的字体大小并且仍然使您的文本完美居中。
【讨论】:
以上是关于在同一行的标题内垂直 div的主要内容,如果未能解决你的问题,请参考以下文章