我试图将加号在圆内垂直和水平居中。我尝试过使用line-height,但这似乎不起作用:
代码
.circle {
font-size: 3.27rem;
font-weight: 400;
width: 94px;
border-radius: 50%;
color: white;
line-height: 94px;
text-align: center;
padding: 0;
height: 94px;
margin: 0 auto;
box-shadow: 0px 2px 5px rgba(94, 94, 94, 0.68);
cursor: pointer;
background: #fcce00;
position: absolute;
right: 50px;
z-index: 10;
span {
line-height: 94px;
}
}Run Code Online (Sandbox Code Playgroud)
<div class="circle">
<span>+</span>
</div>Run Code Online (Sandbox Code Playgroud)
我正在尝试在文本前添加破折号。参见图片。如何在文本前添加破折号,使其看起来像图像?
我有以下html
<div class="mrvl-ex-grid">
<article class="sample">
<img src="/images/examples/PN9Xg.jpg" alt="Lorem Sum"><div class="mrvl-ex-item-hover-menu">
<div class="mrvl-ex-item-preview-btn"></div>
<label class="mrvl-ex-item-label">Video</label>
</div>
</article>
</div>
Run Code Online (Sandbox Code Playgroud)
这是带有 CSS 的 jsfiddle:
https://jsfiddle.net/weina67/0vozsjsb/
Run Code Online (Sandbox Code Playgroud)
我让悬停菜单和预览按钮正常工作(但中间的破折号不起作用。如何在预览按钮和标签之间的中间添加破折号?请参阅附图
当人们将鼠标悬停在图像上时,会显示悬停菜单以及标签和预览按钮。另外,我必须使破折号响应(在 1024px、1280px、1440px 上看起来不错)。它必须显示在预览按钮和标签的中间。
请注意,在小提琴中,您必须将鼠标悬停在图像上才能看到标签以及我想要添加破折号的位置。
I have a container that sometimes has two items or three or one. If there is one item, I want each container (there is only one) to have a width of 100%. If there are two items, I want each container to have a width of 50%. If there are three items, I want each container to have a width of 33%. The number of items is not known before hand but after a script executes. How can I accomplish …