Question

嗨，我正在努力将图像垂直放置在div中，想知道是否有人可以提供帮助。

# 1. Go to a website, e.g. https://www.wunderground.com/hurricane/hurrarchive.asp?region=ep
# 2. Highlight the table of data, e.g. of Hurricanes in the East Pacific
# 3. Copy the text from your browser
# 4. Run this script: the data will be available as a dataframe
import pandas as pd
df = pd.read_clipboard()
print(df)

Answer 1

尝试使用flexbox：

#homepage {
    height: 100vh;
    background-color: #fff;
    display: flex;
    align-items: center;
}

Answer 2

尝试

<img src="paris.jpg" alt="Paris" class="center"> 
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

Answer 3

尝试此代码。可能会对您有帮助。

#home-logo{
    display: block;
    margin: 0 auto;
    padding: 0;
    text-align: center; 
}

#homepage{height: 100vh;
    background-color:#fff;
    margin: 0 auto;
    padding: 0;
    text-align: center; 
}

Answer 4

对容器使用flex并设置justify-content: center和align-items: center

#home-logo {
  display: block;
  margin: 0 auto;
  width: 200px;
  height: 200px;
}

#homepage {
  display: flex;
  height: 100vh;
  background-color: #fff
  justify-content: center;
  align-items: center;
}

<div id="homepage">
  <img src="assets/img/home-logo.png" id="home-logo">
</div>

垂直对齐不起作用时，将图像移至div的中心

4 个答案: