Question

我想对齐支票或图标，使其在水平和垂直方向位于中心位置，并考虑消息框的高度为自动。

＆＃13;

Sub dde2_postExec(ByVal message as string)
    dim v as variant: v=split(message,"...")
    for i = 1 to ubound(v)-1
        range("B" & i).value = v(i)
    next
end sub

＆＃13;

.done {
  position: relative;
  /* necessary for positioning the :after */
}

.done {
  list-style: none;
  /* remove normal bullet for done items */
}

.left-pop {
  float: left;
  width: 110px;
  height: auto;
  padding-top: 10px;
}

.right-pop {
  float: right;
  width: 340px;
  height: auto;
  overflow: auto;
  padding: 10px;
  color: white;
  border-left: 2px solid rgba(60, 118, 61, 0.22);
}

.close-span {
  border-radius: 50%;
  float: right;
  padding: 0px 8px 3px 8px;
  position: absolute;
  right: 5px;
  font-size: 19px;
  top: 5px;
  color: #f5f5f5;
  font-weight: bold;
}

.unsuccessclose-span {
  border-radius: 50%;
  float: right;
  padding: 0px 8px 3px 8px;
  position: absolute;
  right: 5px;
  font-size: 19px;
  top: 5px;
  color: #f5f5f5;
  font-weight: bold;
}

.success-popup {
  width: 450px;
  height: auto;
  overflow: auto;
  background: rgba(27, 197, 163, 1);
  position: relative;
  margin: 80px;
}

.unsuccess-popup {
  width: 450px;
  height: auto;
  overflow: auto;
  background: rgba(244, 67, 54, 0.79);
  position: relative;
  margin: 80px;
}

.unsuccessright-pop {
  float: right;
  width: 340px;
  height: auto;
  overflow: auto;
  padding: 10px;
  color: white;
  border-left: 2px solid rgba(244, 67, 54, 0.69);
}

＆＃13;

https://jsfiddle.net/nish4114/kt2p7vbh/1/

Answer 1

你应该能够使用flex在中心对齐刻度线，我也会将它用于你的盒子（而不是浮点数） - 我已经从下面的代码中删除了所有的浮点数，并在任何添加项旁边添加了注释。 / p>

＆＃13;

.left-pop {
    width: 110px; 
    display: flex;
    justify-content: center;
    align-items: center;
  }

.success-popup {
    width: 450px;
    height: auto;
    overflow: auto;
    margin: 80px;
    background: rgba(27, 197, 163, 1);
    position: relative;
    display: flex;
  }

＆＃13;

.done {
  position: relative;
  /* necessary for positioning the :after */
  list-style: none;
  /* remove normal bullet for done items */
}

.left-pop {
  width: 110px;

  /* 
  height: auto;
  padding-top: 10px;   not sure what these are for so have removed them*/
  
  /* the following will align the tick */
  display: flex;
  justify-content: center;  /* vertical centring */
  align-items: center;      /* horizontal centring */
}

.right-pop {
  width: 340px;
  height: auto;
  overflow: auto;
  padding: 10px;
  color: white;
  border-left: 2px solid rgba(60, 118, 61, 0.22);
}

.close-span {
  border-radius: 50%;
  padding: 0px 8px 3px 8px;
  position: absolute;
  right: 5px;
  font-size: 19px;
  top: 5px;
  color: #f5f5f5;
  font-weight: bold;
}

.unsuccessclose-span {
  border-radius: 50%;
  float: right;
  padding: 0px 8px 3px 8px;
  position: absolute;
  right: 5px;
  font-size: 19px;
  top: 5px;
  color: #f5f5f5;
  font-weight: bold;
}

.success-popup {
  width: 450px;
  height: auto;
  overflow: auto;
  background: rgba(27, 197, 163, 1);
  position: relative;
  margin: 80px;
  
  display: flex;      /* add the following so you don't need to use floats and so the boxes become equal heights*/
}

.unsuccess-popup {
  width: 450px;
  height: auto;
  overflow: auto;
  background: rgba(244, 67, 54, 0.79);
  position: relative;
  margin: 80px;
}

.unsuccessright-pop {
  float: right;
  width: 340px;
  height: auto;
  overflow: auto;
  padding: 10px;
  color: white;
  border-left: 2px solid rgba(244, 67, 54, 0.69);
}

＆＃13;

Answer 2

我建议让整个模块使用嵌套的flexbox，请参阅下面的简化代码：

.success-popup {
  width: 450px;
  display: flex;
  background: rgba(27, 197, 163, 1);
  color: #fff;
}

.left-pop {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 110px;
}

.left-pop .fa {
  font-size: 40px;
}

.right-pop {
  border-left: 2px solid rgba(60, 118, 61, 0.22);
  padding: 20px 10px;
  flex: 1;
}

.right-pop h4 {
  font-size: 18px;
  margin: 0 0 10px;
}

.right-pop p {
  margin: 0;
}

.close-span {
  margin: 10px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="success-popup">
  <div class="left-pop">
    <i class="fa fa-check"></i>
  </div>
  <div class="right-pop">
    <h4>Success!</h4>
    <p>You successfully read this impoortant alert</p>
  </div>
  <span class="close-span">
    <i class="fa fa-close"></i>
  </span>
</div>

Answer 3

将图标样式更改为

 <i class="fa fa-check" style="font-size:40px;color:white;display: table; margin: 0 auto;" ></i>

Answer 4

这种方式可以使div Our number is: 20中的任何内容都居中。

.success-popup

居中对齐消息框中的图标

4 个答案: