注意:我已经阅读了如何将<span>垂直居中div?但是这里有点不同(请参阅下文)。
我正在尝试在圆形按钮内插入一些大文本,在另一个按钮内插入图像,以及垂直对齐的标题。
这在Chrome上完美运行(我使用了Circle按钮css的各种答案):
但奇怪的是,它不适用于Firefox和iPhone Safari(对齐方式不良):
如何解决这样的垂直对齐问题?
.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>
注:我也试过vertical-align:middle
在建议如何垂直居中一个<span>一个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; }
但我认为这里的问题来自子跨度具有不同的字体大小的事实。
如@TemaniAfif的注释中所述,字体本身会影响高度和对齐方式,如本jsFiddle所示。
一种解决方案是使用JavaScript:如何在CSS中垂直对齐所有文本?
另一种方法是仅使用CSS生成+符号:在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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句