使用CSS垂直对齐div中的图像使用CSS

-1

我想垂直对齐div中的图像。我有一个div，它显示一个彩色背景，我需要将其他对象放在该div中，但是垂直居中。使用CSS垂直对齐div中的图像使用CSS

我已经craeted一个sjfiddle尝试和解释。

JSFiddle

来源

2017-07-26 DCJones

你为什么要设置灰色的背景？也许你需要渐变？ –

为什么你在标记中使用这么多的包装块？ –

尝试给出你想要的结果的例子。所提供的HTML和CSS非常复杂。 – Don

首先，你应该摆脱margin-top: -60px在.room-name。然后有两个文本，不只是一个。看看下面的设置，我认为这可能是你想要的（？）对中的关键部分是相对位置，以：50％和变换：translatey（-50％），但也是背景位置背景图像。

#wrapper-new { 
 
    width: 100%; 
 
} 
 

 
#record-section { 
 
    width: 100%; 
 
    float: left; 
 
    height: 100%; 
 
    border-bottom-width: 1px; 
 
    border-bottom-style: solid; 
 
    border-bottom-color: #333; 
 
    height: 80px; 
 
} 
 

 
#room-section { 
 
    width: 20%; 
 
    background-color: #E9E9E9; 
 
    display: inline-block; 
 
    float: left; 
 
    height: 80px; 
 
} 
 

 
.direction-image { 
 
    display: inline-block; 
 
    background-repeat: no-repeat; 
 
    background-image: url(https://s2.postimg.org/te7o9w9ix/orbitor_small_17.png); 
 
    background-position: 0 center; 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 

 
.room-name { 
 
    font-family: Tahoma, Geneva, sans-serif; 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
    color: #006; 
 
    display: inline-block; 
 
    margin-left: 100px; 
 
    width: 200px; 
 
    float: left; 
 
    margin-right: 30px; 
 
} 
 

 
.floor-name { 
 
    font-family: Tahoma, Geneva, sans-serif; 
 
    font-size: 26px; 
 
    font-weight: bold; 
 
    color: #666; 
 
}

<div id="wrapper-new"> 
 
    <div id="record-section"> 
 
    <div id="room-section"> 
 
     <div class="direction-image"> 
 
     <div class="room-name">Box 
 
      <div class="floor-name">Ground</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-07-26 17:10:26 Johannes

垂直居中，你只需要添加display: flex和align-items: center的元素直属母公司及其所有子项将被垂直居中的孩子。

使用您的标记将是这样的（也被删除负面top-margin从您的样式）：

#wrapper-new { 
 
    width: 100%; 
 
} 
 

 
#record-section { 
 
    width: 100%; 
 
    float: left; 
 
    height: 100%; 
 
    border-bottom-width: 1px; 
 
    border-bottom-style: solid; 
 
    border-bottom-color: #333; 
 
    height: 80px; 
 
} 
 

 
#room-section { 
 
    width: 20%; 
 
    background-color: #E9E9E9; 
 
    display: inline-block; 
 
    float: left; 
 
    height: 80px; 
 
} 
 

 
.direction-image { 
 
    margin-top: 8px; 
 
    vertical-align: middle; 
 
    background-repeat: no-repeat; 
 
    background-image: url(https://s2.postimg.org/te7o9w9ix/orbitor_small_17.png); 
 
} 
 

 
.room-name { 
 
    font-family: Tahoma, Geneva, sans-serif; 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
    color: #006; 
 
    /* remove display: inline-block; */ 
 
    display: flex; /* new */ 
 
    align-items: center; /* new */ 
 
    /* remove margin-top: -60px; */ 
 
    margin-left: 100px; 
 
    width: 200px; 
 
    float: left; 
 
    margin-right: 30px; 
 
} 
 

 
.floor-name { 
 
    font-family: Tahoma, Geneva, sans-serif; 
 
    font-size: 26px; 
 
    font-weight: bold; 
 
    color: #666; 
 
}

<div id="wrapper-new"> 
 
    <div id="record-section"> 
 
    <div id="room-section"> 
 
     <div class="direction-image"> 
 
     <div class="room-name">Box 
 
      <div class="floor-name">Ground</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-07-26 16:57:18

值得注意的是，它只支持新的浏览器版本。 –

@VladoPandžić按照[可以使用]（https://caniuse.com/#search=flexbox），flexbox现在有97.5％的设备支持，所以我不确定此功能是如此“新颖”以关心这个。 1-2年后，这张纸条将毫无用处。 –

是的，我看到了，但因为它是影响整个布局的属性，并且在一些国家/地区，IE浏览器拥有10-20％的标记份额，并且因为在一些公司中，您不能只删除IE <11支持（就像我在公司工作） –

如果你不想使用Flexbox的（这是不被支持旧的浏览器），你可以添加行高：100px（或其他一些数字）（如果父母有高度100px）

.box{ 
 
height:100px; 
 
width:100px; 
 
color:white; 
 
background-color:red; 
 
line-height:100px; 
 
}

<div class="box"> 
 
Text inside box 
 
</div>

来源

2017-07-26 16:59:18

尝试Flexbox的：JSFiddle。

<div id="wrapper-new"> 
    <div id="record-section"> 
    <div id="room-section"> 
     <div class="direction-image"> 
      <div class="room-name">Box 
       <div class="floor-name">Ground</div> 
     </div> 
     </div> 
    </div> 
</div> 

.wrapper { 
    width: 200px; 
    height: 200px; 
    display: flex; 
    align-items: center; 
    background-color: #FFFFFF; 
}

您可以通过将包装器的align-items属性更改为居中来更改垂直对齐内部项目的方式。

来源

2017-07-26 17:03:36 Larpee

使用CSS垂直对齐div中的图像使用CSS

回答

相关问题