如何垂直对齐<p>和</p> <div>，将它们放在没有table-cell属性的位置

时间：2016-11-24 19:59:06

标签： html css

我想定位我的文字，使其在中间与ch-grid <div>（圆形颜色的东西）垂直对齐。

是否可以在不给<p>任何显示属性的情况下制作它，因为当我定位它时我会给它display:none所以我可以淡出它并稍后做一些事情。

很抱歉，但我尝试了很多东西，没有什么对我有用。非常感谢。
这是我的代码：

<div class="container">
<div class="row">
    <div class="col-xs-12 col-md-3 col-md-push-6"> 
    <div class="ch-grid">
           <p>Who are we?</p>            
         <div class="ch-item ch-img-1">
             <div class="ch-info ch-info-1">
               <i class="fa fa-user fa-5x" aria-hidden="true"></i>
             </div>
         </div>
      </div>    
   </div>
</div>
</div>

和CSS：

body{
padding-top: 100px; 
height: 100%;
font-family: helvetica, sans-serif, verdana;
}

.ch-grid {
position: relative;
text-align: center;
margin-bottom: 5vh;
width:400px;
height: 100px;
display: inline-block;
vertical-align: middle;
}

.ch-grid:after,
.ch-item:before {
  content: '';
  display: table;
}

.ch-grid:after {
  clear: both;
 }

.ch-item {
 width: 100px;
 height: 100px;
 border-radius: 50%;
 position: absolute;
 margin-left: 200px;
 overflow: hidden;
 cursor: default;
 box-shadow: 
    inset 0 0 0 16px rgba(255,255,255,0.6),
    0 1px 2px rgba(0,0,0,0.1);
 transition: all 0.4s ease-in-out;
 }

p {
 width: 100px;
 vertical-align: middle;
}
 .ch-img-1 { 
 background-image: url("http://res.cloudinary.com/dhcrccc1b/image/upload /c_scale,h_100,q_46,w_100/v1479836467/Bike%20page/Free-HD-artisticwallpaper4.jpg");
}   

.ch-info {

background: rgba(218, 173, 77, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
overflow: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
transform: scale(0);
 }

.ch-info-2{
 background: rgba(157, 151, 138, 0.8);
 }

 .ch-info-3{
 background: rgba(126, 154, 220, 0.8);
 }

 .ch-info-4{
background: rgba(76, 166, 37, 0.8);
  }

.ch-info i {
margin-top: 15px;
color: white;
}

.ch-item:hover {
box-shadow: 
    inset 0 0 0 1px rgba(255,255,255,0.1),
    0 1px 2px rgba(0,0,0,0.1);
}

.ch-item:hover .ch-info {
transform: scale(1);
opacity: 1;
}

https://jsfiddle.net/Chainervk/qg7en3cs/

3 个答案:

答案 0 :(得分：0)

在$('#add-remove-buttons').find('.button').trigger('click'); 标记中添加top:50%; transform: translateY(-50%);，使其在中间垂直对齐

p

<强>演示： -

＆＃13;
＆＃13; 
position: relative;
top: 50%;
margin: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
＆＃13; 
body{
padding-top: 100px; 
height: 100%;
font-family: helvetica, sans-serif, verdana;
}

.ch-grid {
    position: relative;
    
    text-align: center;
   margin-bottom: 5vh;
   width:400px;
   height: 100px;
   display: inline-block;
vertical-align: middle;
}

.ch-grid:after,
.ch-item:before {
    content: '';
    display: table;
}

.ch-grid:after {
    clear: both;
}

.ch-item {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    margin-left: 200px;
    overflow: hidden;
    cursor: default;
    box-shadow: 
        inset 0 0 0 16px rgba(255,255,255,0.6),
        0 1px 2px rgba(0,0,0,0.1);
    transition: all 0.4s ease-in-out;
}
p {
  
width: 100px;
vertical-align: middle;
  position: relative;
  top: 50%;
  margin:0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  
}
.ch-img-1 { 
    background-image: url("http://res.cloudinary.com/dhcrccc1b/image/upload/c_scale,h_100,q_46,w_100/v1479836467/Bike%20page/Free-HD-artistic-wallpaper4.jpg");
}   

.ch-img-2 { 
    background-image: url("http://res.cloudinary.com/dhcrccc1b/image/upload/c_scale,h_100,q_41,w_100/v1479836446/Bike%20page/Fantastic-Artistic-Pictures5.jpg");

}

.ch-img-3 { 
    background-image: url("http://res.cloudinary.com/dhcrccc1b/image/upload/c_scale,h_100,q_43,w_100/v1479836455/Bike%20page/Artistic-Pictures-HD.jpg");
}

.ch-img-4 { 
    background-image: url("http://res.cloudinary.com/dhcrccc1b/image/upload/c_scale,h_100,q_31,w_100/v1479836467/Bike%20page/Artistic-Images-For-Desktop2.jpg");
}

.ch-info {

    background: rgba(218, 173, 77, 0.8);
    width: inherit;
    height: inherit;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease-in-out;
    transform: scale(0);
}

.ch-info-2{
     background: rgba(157, 151, 138, 0.8);
}

.ch-info-3{
    background: rgba(126, 154, 220, 0.8);
}

.ch-info-4{
    background: rgba(76, 166, 37, 0.8);
}

.ch-info i {
    margin-top: 15px;
    color: white;
}

.ch-item:hover {
    box-shadow: 
        inset 0 0 0 1px rgba(255,255,255,0.1),
        0 1px 2px rgba(0,0,0,0.1);
}

.ch-item:hover .ch-info {
    transform: scale(1);
    opacity: 1;
}
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您需要向上移动div.ch-item。

.ch-item {
    margin-top: -75px;
}

以下是摘录：

＆＃13;
＆＃13; 
body {
  padding-top: 100px;
  height: 100%;
  font-family: helvetica, sans-serif, verdana;
}
.ch-grid {
  position: relative;
  text-align: center;
  margin-bottom: 5vh;
  width: 400px;
  height: 100px;
  display: inline-block;
  vertical-align: middle;
}
.ch-grid:after,
.ch-item:before {
  content: '';
  display: table;
}
.ch-grid:after {
  clear: both;
}
.ch-item {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  margin-left: 200px;
  overflow: hidden;
  cursor: default;
  box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease-in-out;
  margin-top: -75px;
}
p {
  width: 100px;
  vertical-align: middle;
}
.ch-img-1 {
  background-image: url("http://res.cloudinary.com/dhcrccc1b/image/upload/c_scale,h_100,q_46,w_100/v1479836467/Bike%20page/Free-HD-artistic-wallpaper4.jpg");
}
.ch-img-2 {
  background-image: url("http://res.cloudinary.com/dhcrccc1b/image/upload/c_scale,h_100,q_41,w_100/v1479836446/Bike%20page/Fantastic-Artistic-Pictures5.jpg");
}
.ch-img-3 {
  background-image: url("http://res.cloudinary.com/dhcrccc1b/image/upload/c_scale,h_100,q_43,w_100/v1479836455/Bike%20page/Artistic-Pictures-HD.jpg");
}
.ch-img-4 {
  background-image: url("http://res.cloudinary.com/dhcrccc1b/image/upload/c_scale,h_100,q_31,w_100/v1479836467/Bike%20page/Artistic-Images-For-Desktop2.jpg");
}
.ch-info {
  background: rgba(218, 173, 77, 0.8);
  width: inherit;
  height: inherit;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0;
  transition: all 0.4s ease-in-out;
  transform: scale(0);
}
.ch-info-2 {
  background: rgba(157, 151, 138, 0.8);
}
.ch-info-3 {
  background: rgba(126, 154, 220, 0.8);
}
.ch-info-4 {
  background: rgba(76, 166, 37, 0.8);
}
.ch-info i {
  margin-top: 15px;
  color: white;
}
.ch-item:hover {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.ch-item:hover .ch-info {
  transform: scale(1);
  opacity: 1;
}
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-md-3 col-md-push-6">

        <div class="ch-grid">
          <p>Who are we?</p>
          <div class="ch-item ch-img-1">
            <div class="ch-info ch-info-1">
              <i class="fa fa-user fa-5x" aria-hidden="true"></i>
            </div>
          </div>
        </div>
        <div class="ch-grid">
          <p>Bikes!</p>
          <div class="ch-item ch-img-2 ">
            <div class="ch-info ch-info-2">
              <i class="fa fa-bicycle fa-5x" aria-hidden="true"></i>
            </div>
          </div>
        </div>

        <div class="ch-grid">
          <p>Parts.</p>
          <div class="ch-item ch-img-3">
            <div class="ch-info ch-info-3">
              <i class="fa fa-cog fa-spin fa-5x fa-fw"></i>
            </div>
          </div>
        </div>

        <div class="ch-grid">
          <p>Why ride?</p>
          <div class="ch-item ch-img-4">
            <div class="ch-info ch-info-4">
              <i class="fa fa-arrows fa-5x" aria-hidden="true"></i>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

为什么不在align-items:center使用flexbox：https://jsfiddle.net/qg7en3cs/5/？它使容器的直接子节点对齐，而无需更改其display值。

另外，

的用途是什么 
.ch-grid:after,
.ch-item:before {
    content: '';
    display: table;
}

.ch-grid:after {
    clear: both;
}

在您的初始演示中？它看起来就像'micro clearfix'hack，但只有在使用浮点数构建布局时才需要clearfix hacks，但我在你的演示中没有看到任何浮动。

相关问题
最新问题