使用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

回答

相關問題