Question

我有2个元素代表+/-号，当两个元素可见时，它们代表+，在单击时，垂直元素消失了，变成-。

+和-都在一个圆内，我想同时将垂直和水平元素居中于该圆内。

这里是一个小提琴：http://jsfiddle.net/9ek3gt7o/10

HTML：

<span class="plusminussign closed">
     <div class="circle">
         <div class="horizontal"></div>
         <div class="vertical"></div>
     </div> <!-- .circle -->
</span> <!-- .plusminussign -->

CSS：

.plusminussign{
    position: relative;
    display:inline-block;
    height: 24px;
    width: 24px;
    vertical-align: bottom;
    opacity: .7;
    background: green;
    border-radius: 50%;
    color: #fff;
    margin: 10px auto;
    cursor: pointer;
}

.circle .horizontal {
  position: absolute;
    background-color: #fff;
    width: 15px;
    height: 2.5px;
    left: 50%;
    top: 50%;
}

.circle .vertical {
  position: absolute;
    background-color: #fff;
    width: 2.5px;
    height: 15px;
    left: 50%;
    top: 50%;
}

.closed .horizontal {
  transition: all 0.5s ease-in-out;
  transform: rotate(-90deg);
  opacity: 1;
}

.closed .vertical {
  transition: all 0.5s ease-in-out;
  transform: rotate(-90deg);
}

.opened {
  opacity: 1;
}

.opened .horizontal {
  transition: all 0.5s ease-in-out;
  transform: rotate(90deg);
  opacity: 0;
}

.opened .vertical {
  transition: all 0.5s ease-in-out;
  transform: rotate(90deg);
}

单击时，类opened将添加到容器.plusminussign中。

jQuery：

$('.plusminussign').on('click', function(){
    $(this).toggleClass('opened');
});

我想要一个与x浏览器兼容的响应式解决方案，以便在屏幕变小时不丢失位置。

如何在圆内将水平和垂直元素居中？

Answer 1

要使内容居中，您可以采用几种解决方案：

负边距

在较旧的浏览器和较新的浏览器中均可使用，但必须使用高度/宽度进行硬编码

.circle{
    position: relative;
    height: 100px;
    width: 100%;
    border-radius: 50%
}

.plus-vert{
    height: 50px;
    width: 2px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -1px;
}

.plus-horiz{
    height: 2px;
    width: 50px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -1px 0 0 -25px; 
}

左上/左值将线的左上角放在圆的中心。负边距将线移动到每次使项目居中的通道的一半。这在较旧的浏览器中有效，但由于您必须对高度/宽度进行硬编码，因此不太理想。

CSS3转换

这与以前的方法大部分相似，不同之处在于您使用了transform将其移回一半而不是负边距。

.circle{
    position: relative;
    height: 100px;
    width: 100%;
    border-radius: 50%
}

.plus-vert{
    height: 50px;
    width: 2px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.plus-horiz{
    height: 2px;
    width: 50px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%); 
}

这仅与启用CSS3的浏览器兼容，并且具有不必关心高度/宽度是多少的优点，

Flex Box

这使用flex box布局将内容居中

.circle { 显示：flex; 证明内容：中心； align-items：居中; 高度：100px；宽度：100％; 边界半径：50％ }

.plus-vert{
    height: 50px;
    width: 2px;
    background-color: #fff;
}

.plus-horiz{
    height: 2px;
    width: 50px;
    background-color: #fff; 
}

这具有从子级获取所有布局逻辑并将其放置在父级上的优点。

它们都应该很好，仅取决于您要支持的浏览器。

使正/负切换元素在圆内居中

1 个答案: