gpt4 book ai didi

html - 垂直居中的两个 div 彼此相邻没有任何作用

转载 作者:太空宇宙 更新时间:2023-11-04 10:25:09 25 4
gpt4 key购买 nike

第一次发帖!耶!嗨 Stackoverflow 我有一个问题。

我有一个 100% 宽度和自动高度的 div,里面有两个东西。一个文本框和一个图像。我希望两者始终彼此垂直居中,但我似乎无法找到方法!这是我的代码。

编辑:这是关于 imacshowcase 的。

HTML

<section id="responsiveshowcase">
<h1>Services</h1>
<div id="imacshowcase">
<div id="imacshowcasedesc"><img src="img/icons/code.png" alt="">
<h1>Website Development</h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</div><img class="wow animated slideInRight" src="img/imacshowcase.png" alt=""> </div>
<br class="clearBoth" />
<div id="macbookshowcase"><img class="wow animated slideInLeft" src="img/macbookshowcase.png" alt="">
<div id="macbookshowcasedesc"><img src="img/icons/seo.png" alt="">
<h1>SEO</h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</div>
<br class="clearBoth" />
</div>
</section>

CSS

#responsiveshowcase {
width: 100%;
text-align: center;
font-family: 'Raleway', sans-serif;
}

#imacshowcase {
width: 100%;
overflow: auto;

}

#imacshowcasedesc {
width: 40%;
height: 100%;
margin-left: 10%;
margin-right: 5%;
float: left;
}

#imacshowcase > img {
width: 30%;
margin-left: 5%;
margin-right: 10%;
}

#imacshowcasedesc > img {
width: 10%;
margin-bottom: 0;
display: block;
margin-left: auto;
margin-right: auto;
}

#imacshowcasedesc > h1 {
margin-top: 0;
font-size:1.5em
}

#macbookshowcase {
width: 100%;
}

#macbookshowcasedesc {
width: 40%;
display: block;
float: left;
margin-left: 5%;
margin-right: 10%;
}

#macbookshowcase > img {
width: 30%;
display: block;
float: left;
margin-left: 10%;
margin-right: 5%;
}

#macbookshowcasedesc > img {
width: 10%;
margin-bottom: 0;
display: block;
margin-left: auto;
margin-right: auto;
}

#macbookshowcasedesc > h1 {
margin-top: 0;
}

最佳答案

首先,通常最佳做法是不要对 ID 标签做太多样式设置,而将它们主要保留给 javascript 函数。请改用 css 类来设置样式。

其次,Flexbox 是你的 friend

#responsiveshowcase {
display: flex;
align-items: center;
}

关于html - 垂直居中的两个 div 彼此相邻没有任何作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36844802/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com