字体大小较大时div内span的垂直对齐 [英] Vertical alignement of span inside a div when the font-size is big

问题描述

注意:我已经阅读了

但是奇怪的是，它在Firefox和iPhone Safari(对齐不良)上均不起作用:

如何解决这种垂直对齐问题?

  .circlebtn {高度:5.4em;宽度:5.4em;边界半径:50％；背景颜色:黑色；白颜色;文本对齐:居中；光标:指针；边界:0;用户选择:无；轮廓:0显示:inline-block;保证金:1.9em 0 3em 1em;向左飘浮;}.circlebtn img {宽度:3.75em;}#a span {font-size:4em;font-weight:粗体;}#c {margin:1.3em 0 0 1em;向左飘浮;字号:2em；}  

 <按钮id ="a" class ="circlebtn">< span> +</span></button>< button id ="b" class ="circlebtn">< img src ="https://via.placeholder.com/762x416" id ="b"></button>< h1 id ="c"> HELLO</h1>  

注意:我还尝试了 vertical-align:middle ，如

但是我认为问题出在子跨度具有不同的字体大小.

解决方案

如@TemaniAfif的注释中所述，字体本身会影响高度和对齐方式，如如何垂直对齐所有CSS中的文字?

另一种方法是仅使用CSS生成+符号:使用加号CSS中的符号

  .plus {宽度:4.5em;高度:4.5em;背景:线性渐变(#fff，#fff)，线性渐变(#fff，#fff)，#000;背景位置:中心；背景大小:50％0.5em，0.5em 50％；背景重复:不重复；}.半径 {边界半径:50％；}  

 < div class ="plus radius"></div>  

Note: I've already read How to vertically center a <span> inside a div? but here it's slightly different (see below).

---

I'm trying to insert some big text inside a circle button, an image inside another one, and a title aligned vertically.

This perfectly works on Chrome (I've used various answers from Circle button css):

But strangely, it doesn't work on Firefox and also iPhone Safari (bad alignment):

How to solve such a vertical alignment problem?

.circlebtn { height: 5.4em; width: 5.4em; border-radius: 50%; background-color: black; color: white; text-align: center; cursor: pointer; border: 0; user-select: none; outline: 0; display: inline-block; margin: 1.9em 0 3em 1em; float: left; }
.circlebtn img { width: 3.75em; }
#a span { font-size: 4em; font-weight: bold; }
#c { margin: 1.3em 0 0 1em; float: left; font-size: 2em; }

<button id="a" class="circlebtn"><span>+</span></button>
<button id="b" class="circlebtn"><img src="https://via.placeholder.com/762x416" id="b"></button>
<h1 id="c">HELLO</h1>

Note: I've also tried with vertical-align:middle as suggested in How to vertically center a <span> inside a div?:

<div class="parent">
  <span class="child">Yes mom, I did my homework lol</span>
</div>
You should then add the CSS rules

.parent { height: 20px; }
.child { line-height: 20px; vertical-align: middle; }

but I think the problem here comes from the fact the child span has a different font size.

解决方案

As mentioned in @TemaniAfif's comments, the font itself can influence the height and alignment, as seen in this jsFiddle.

One solution would be to use JavaScript: How to vertically align all text in CSS?

Another one would be to generate the + sign with CSS only: Make plus symbol in CSS

.plus {
  width:4.5em;
  height:4.5em;
  
  background:
    linear-gradient(#fff,#fff),
    linear-gradient(#fff,#fff),
    #000;
  background-position:center;
  background-size: 50% 0.5em, 0.5em 50%;
  background-repeat:no-repeat;
}

.radius {
  border-radius:50%;
}

<div class="plus radius">
</div>

这篇关于字体大小较大时div内span的垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！