Question

我正在使用：在这样的内容之后

.img-div:after {
    content: ".01";
    position: absolute;
    width: 76.9%;
    height: 55%;
    top: 10%;
    right: 2.5%;
    padding: 20px;
    background-color: #6758ef;
    opacity: .8;
    font-size: 59px;
    font-weight: 300;
    color: #fff;
    text-align: center;
}

我想知道如何垂直居中内容属性。

注意：我之前不能使用：因为我已将它用于其他用途

https://jsfiddle.net/tfkt5411/

Answer 1

DatabaseReference ref=FirebaseDatabase.getInstance().getReference().child("KyEpOpqClj_sE2ktP1");
ref.addValueEventListener(new ValueEventListener(){
  @Override
  public void onDataChange(DataSnapshot dataSnapshot) {
      String value=dataSnapshot.child("Metal").getValue().toString();
      String height=dataSnapshot.child("Height").getValue().toString();
      String diameter=dataSnapshot.child("Diameter").getValue().toString();
      String literage=dataSnapshot.child("Literage").getValue().toString();
  }

 @Override
 public void onCancelled(FirebaseError firebaseError) {


 }
 });

DatabaseReference ref=FirebaseDatabase.getInstance().getReference();
ref.addValueEventListener(new ValueEventListener(){
  @Override
  public void onDataChange(DataSnapshot dataSnapshot) {
    for(DataSnapshot data : dataSnapshot.getChildren()){
    String value=data.child("Metal").getValue().toString();
     //retrieve here
   }

Answer 2

试试这个：

.img-div:after {
     line-height:197px;
     //Other codes...
}

197px是相等的高度（55％）。

请参阅Demo

Answer 3

您可以为width指定height，background和.img-div，然后您可以轻松地使用:after来纵向和横向居中，检查updated fiddle。

希望这会有所帮助：）

Answer 4

＆＃13;

.img-div {
  height: 300px;
  width: 300px;
}

.img-div:after {
  content: ".01";
  width: 76.9%;
  height: 55%;
  background-color: #6758ef;
  opacity: .8;
  font-size: 59px;
  font-weight: 300;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

＆＃13;

<div class="img-div"></div>

＆＃13;

我怎样才能垂直居中：内容之后

4 个答案: