logo标签列表

将星级评分居中对齐到Div容器中。

htmlcss
5

div.stars {
  display: inline-block;
}

input.star { display: none; }

label.star {
  float: right;
  padding: 10px;
  font-size: 36px;
  color: #444;
  transition: all .2s;
}

input.star:checked ~ label.star:before {
  content: '\f005';
  color: #FD4;
  transition: all .25s;
}

input.star-5:checked ~ label.star:before {
  color: #FE7;
  text-shadow: 0 0 20px #952;
}

input.star-1:checked ~ label.star:before { color: #F62; }

label.star:hover { transform: rotate(-15deg) scale(1.3); }

label.star:before {
  content: '\f006';
  font-family: FontAwesome;
}
<div class="stars">
  <form action="">
    <input class="star star-5" id="star-5" type="radio" name="star"/>
    <label class="star star-5" for="star-5"></label>
    <input class="star star-4" id="star-4" type="radio" name="star"/>
    <label class="star star-4" for="star-4"></label>
    <input class="star star-3" id="star-3" type="radio" name="star"/>
    <label class="star star-3" for="star-3"></label>
    <input class="star star-2" id="star-2" type="radio" name="star"/>
    <label class="star star-2" for="star-2"></label>
    <input class="star star-1" id="star-1" type="radio" name="star"/>
    <label class="star star-1" for="star-1"></label>
  </form>
</div>

如何在不破坏鼠标悬停效果的情况下将

stars
居中对齐到
中央？我尝试了改变float，但要么向左移动，要么向右移动，或者交换hover效果，我希望它动态地保持在
的中心位置而不会向右或向左移动。

哪个 div 是中心？<div class="stars"> 的宽度仅限于其中的星星吗？ - G.Hunt
如果我将 .stars 的 width 设置为 100％，那么整个子 divs 将向右移动。但是，如果可能在将 width 设置为 100％ 后将其移动到左侧，那么它就是 .stars。@G.Hunt - AXAI
4个回答
5
您可以尝试以下解决方案之一： 解决方案 #1（使用 flexbox）： 

div.stars {
  display:flex;
  flex-direction:column;
}
div.stars form {
  display:flex;
  align-self:center;
  flex-direction:row-reverse;
}
input.star {
  display: none;
}
label.star {
  display:inline-block;
  padding: 10px;
  font-size: 36px;
  color: #444;
  transition: all .2s;
}
input.star:checked ~ label.star:before {
  content: '\f005';
  color: #FD4;
  transition: all .25s;
}
input.star-5:checked ~ label.star:before {
  color: #FE7;
  text-shadow: 0 0 20px #952;
}
input.star-1:checked ~ label.star:before {
  color: #F62;
}
label.star:hover {
  transform: rotate(-15deg) scale(1.3); 
}
label.star:before {
  content: '\f006';
  font-family: FontAwesome;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="stars">
  <form action="">
    <input class="star star-5" id="star-5" type="radio" name="star"/>
    <label class="star star-5" for="star-5"></label>
    <input class="star star-4" id="star-4" type="radio" name="star"/>
    <label class="star star-4" for="star-4"></label>
    <input class="star star-3" id="star-3" type="radio" name="star"/>
    <label class="star star-3" for="star-3"></label>
    <input class="star star-2" id="star-2" type="radio" name="star"/>
    <label class="star star-2" for="star-2"></label>
    <input class="star star-1" id="star-1" type="radio" name="star"/>
    <label class="star star-1" for="star-1"></label>
  </form>
</div>

方案#2（使用text-align）： 

div.stars {
  text-align:center;
  direction:rtl;
}
div.stars form {
  display:inline-block;
}
input.star {
  display: none;
}
label.star {
  display:inline-block;
  padding: 10px;
  font-size: 36px;
  color: #444;
  transition: all .2s;
}
input.star:checked ~ label.star:before {
  content: '\f005';
  color: #FD4;
  transition: all .25s;
}
input.star-5:checked ~ label.star:before {
  color: #FE7;
  text-shadow: 0 0 20px #952;
}
input.star-1:checked ~ label.star:before {
  color: #F62;
}
label.star:hover {
  transform: rotate(-15deg) scale(1.3); 
}
label.star:before {
  content: '\f006';
  font-family: FontAwesome;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="stars">
  <form action="">
    <input class="star star-5" id="star-5" type="radio" name="star"/>
    <label class="star star-5" for="star-5"></label>
    <input class="star star-4" id="star-4" type="radio" name="star"/>
    <label class="star star-4" for="star-4"></label>
    <input class="star star-3" id="star-3" type="radio" name="star"/>
    <label class="star star-3" for="star-3"></label>
    <input class="star star-2" id="star-2" type="radio" name="star"/>
    <label class="star star-2" for="star-2"></label>
    <input class="star star-1" id="star-1" type="radio" name="star"/>
    <label class="star star-1" for="star-1"></label>
  </form>
</div>

方案 #3（不使用<form>，使用flexbox）：

div.stars {
  display:flex;
  flex-direction:row-reverse;
  justify-content:center;
}
input.star {
  display: none;
}
label.star {
  display:inline;
  padding: 10px;
  font-size: 36px;
  color: #444;
  transition: all .2s;
}
input.star:checked ~ label.star:before {
  content: '\f005';
  color: #FD4;
  transition: all .25s;
}
input.star-5:checked ~ label.star:before {
  color: #FE7;
  text-shadow: 0 0 20px #952;
}
input.star-1:checked ~ label.star:before {
  color: #F62;
}
label.star:hover {
  transform: rotate(-15deg) scale(1.3); 
}
label.star:before {
  content: '\f006';
  font-family: FontAwesome;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="stars">
  <input class="star star-5" id="star-5" type="radio" name="star"/>
  <label class="star star-5" for="star-5"></label>
  <input class="star star-4" id="star-4" type="radio" name="star"/>
  <label class="star star-4" for="star-4"></label>
  <input class="star star-3" id="star-3" type="radio" name="star"/>
  <label class="star star-3" for="star-3"></label>
  <input class="star star-2" id="star-2" type="radio" name="star"/>
  <label class="star star-2" for="star-2"></label>
  <input class="star star-1" id="star-1" type="radio" name="star"/>
  <label class="star star-1" for="star-1"></label>
</div>

提示：使用这些解决方案，您不需要使用float属性！

如果我移除 <form>，这是否可行？ - AXAI
我猜测在hover effect方向上需要使用float。 - AXAI
3

添加以下CSS：

body {
  text-align: center;
}

为了避免将中心文本覆盖整个页面，建议在星号周围再包一个div。

JSFiddle: https://jsfiddle.net/wa2vd409/

我认为将整个页面的主体都设置为 text-align: center; 不是一个好主意。 - AXAI
1
哦，经过查看JSFiddle，我现在明白了，我以为你是真的要放置 body {}，抱歉误解了，我的英语不是很好。 - AXAI
更新了这个 JSFiddle，不再将其应用于整个页面：https://jsfiddle.net/wa2vd409/1/ - Jay
3
你甚至可以使用transform - translate，将主要div的position更改为relative，这样你就可以利用left属性将其对齐到页面中间，然后使用transform将其居中对齐。 

div.stars {
  display:inline-block;
  position:relative; /*Add this*/
  left:50%; /*Add this*/
  transform:translate(-50%,0); /*Add this*/
}

input.star { display: none; }

label.star {
  float: right;
  padding: 10px;
  font-size: 36px;
  color: #444;
  transition: all .2s;
}

input.star:checked ~ label.star:before {
  content: '\f005';
  color: #FD4;
  transition: all .25s;
}

input.star-5:checked ~ label.star:before {
  color: #FE7;
  text-shadow: 0 0 20px #952;
}

input.star-1:checked ~ label.star:before { color: #F62; }

label.star:hover { transform: rotate(-15deg) scale(1.3); }

label.star:before {
  content: '\f006';
  font-family: FontAwesome;
}
<div class="stars">
  <form action="">
    <input class="star star-5" id="star-5" type="radio" name="star"/>
    <label class="star star-5" for="star-5"></label>
    <input class="star star-4" id="star-4" type="radio" name="star"/>
    <label class="star star-4" for="star-4"></label>
    <input class="star star-3" id="star-3" type="radio" name="star"/>
    <label class="star star-3" for="star-3"></label>
    <input class="star star-2" id="star-2" type="radio" name="star"/>
    <label class="star star-2" for="star-2"></label>
    <input class="star star-1" id="star-1" type="radio" name="star"/>
    <label class="star star-1" for="star-1"></label>
  </form>
</div>

如果你处于响应式环境中并且屏幕过小，这将倒序工作（右侧星号1，左侧星号5）。 - Ahh ... It's a programming thi
这是因为OP在子元素上使用了float:right，因此在小分辨率下，序列会像你所说的那样中断。使用媒体查询可以解决这个问题。请查看这个jsFiddle https://jsfiddle.net/e2xL1zaf/ - frnt
0
如果你在谈论水平对齐，那么是的，text-align: center可以完成任务。但如果你在谈论垂直对齐，那么vertical-align: middle可以完成任务。我告诉你两个选项，因为你没有明确需要哪一个。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接