Question

我正在尝试创建一个包含三列内容的简单，独立的响应式页面。中间的图像具有全高图像，外部图像具有基本的html内容（文本段落和一个图像）。外部列内容应在可见窗口中垂直居中。

除了垂直居中（最左边和最右边）div的内容之外，这段代码可以完成所需的一切。基本上，内容仍然停留在顶部...任何建议（可能与实际代码，因为我是一个新手）？谢谢！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>title</title>
<style>
.wrapper{
  width: 100%;
  height: 99vh;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
 -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;   
}

.wrap-item{
  width: 33%;
  height: 100%;
  display: inline-block;       
}

.wrap-img{
    width: 33%;
  height: 100vh;      
}

#im {
    background-image: url("url");
    background-repeat: no-repeat;
    background-size: contain;
}
.auto-style1 {
    border-width: 0px;
}
</style>    
</head>    
<body>    
    <div class="wrapper">
        <div class="wrap-item" style="vertical-align:middle">                   
            <p>content </p>     
        </div>
        <div class="wrap-item" id="im"></div>
        <div class="wrap-item" style="vertical-align:middle">               
            <p>content</p>
        </div>
    </div>    
</body>
</html>

Answer 1

我所做的更改是给div#im课程.wrap-img而不是.wrap-item。我还从height:100%中删除了属性.wrap-item，这样包装项目div只与其内容一样高。

注意：我给了#im红色背景，以便您可以看到它。

＆＃13;

.wrapper{
  width: 100%;
  height: 99vh;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
 -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;   
}

.wrap-item{
  width: 33%;
  display: inline-block;       
}

.wrap-img{
    width: 33%;
  height: 100vh; 
  display:inline-block;
}

#im {
    background-image: url("url");
    background-repeat: no-repeat;
    background-size: contain;
    background:#f00;
}
.auto-style1 {
    border-width: 0px;
}

＆＃13;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>title</title>    
</head>    
<body>    
    <div class="wrapper">
        <div class="wrap-item" style="vertical-align:middle">
            <p>content</p>     
        </div>
        <div class="wrap-img" id="im">
        </div>
        <div class="wrap-item" style="vertical-align:middle">      
            <p>content</p>
        </div>
    </div>    
</body>
</html>

＆＃13;

跨浏览器垂直居中3项水平调整大小的外部div

1 个答案: