gpt4 book ai didi

html - 如何设置显示为圆圈的div的垂直对齐?

转载 作者:太空宇宙 更新时间:2023-11-03 23:52:31 26 4
gpt4 key购买 nike

这是我创建的:

enter image description here

这就是我想要的:

enter image description here

这是我的代码:

<div id="OR"><span style=" vertical-align: middle;background:blue;">OR</span></div>  

这是 CSS:

div #OR { border-radius:50%;border-style:1px solid black;background:red;width:42px;height:42px;float:right; background:red;vertical-align: middle;}
div #OR span{ vertical-align: middle; }

所以请帮我把 thart OR 放在 div 的中心。

最佳答案

我认为您不需要为 OR 文本添加额外的元素,您需要的是 line-height 属性

Demo

div {
height: 50px;
width: 50px;
border: 1px solid #ddd;
border-radius: 50%;
font-weight: bold;
line-height: 50px; /* Equals elements height */
text-align: center;
}

如果你想 vertical-align 单个单词,这个解决方案是完美的,如果你想完美地水平和垂直居中元素,其他两种方法是使用 display: table-cell ; 使用 vertical-align: middle; 或使用 CSS 定位。


CSS定位方式..

说明:这里我在包装器/父元素上使用 position: relative;,然后为子元素分配 position: absolute;。不过,这里有一个问题,您需要为要居中的子元素分配固定宽度。

Demo 2

div {
height: 50px;
width: 50px;
border: 1px solid #ddd;
border-radius: 50%;
font-weight: bold;
position: relative;
}

div span {
position: absolute;
border: 1px solid #f00;
left: 50%;
top: 50%;
height: 20px;
width: 24px;
margin-top: -10px; /* Half of the elements height */
margin-left: -12px; /* Half of the elements width */
}

关于html - 如何设置显示为圆圈的div的垂直对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19533725/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com