gpt4 book ai didi

jquery - 将具有完整宽度/高度边框的 div 居中

转载 作者:可可西里 更新时间:2023-11-01 14:45:58 28 4
gpt4 key购买 nike

首先,这是 jfiddle:https://jsfiddle.net/nuLyq28d/

我想做的是让白色边框扩展到整个屏幕高度,并将内容在方框内水平和垂直居中。背景将发生变化,因为它将是三个图像(而不是纯黑色)在彼此之间变化。因此,将白色边框保留为实际图像的一部分会很奇怪。我希望它与图像分开。

<body id="home-page">
<main>
<div>
<p>Lorem ipsum dolor sit amet, duis eros posuere sit, volutpat nec massa sit a ac, amet pede eu justo, suspendisse adipiscing
viverra. Amet quisque, justo elit dui orci aliquam praesent, et condimentum nibh. Ultricies cubilia eu fringilla elementum
erat, arcu metus dictum id feugiat, ultricies interdum elementum, magna nec urna sit non condimentum a, massa tempus nibh.
Eros turpis in erat sed, adipiscing a molestie, eros arcu. Est at est nec augue</p>
</div>
</main>

body#home-page
{
background-color: #000000;
}

body#home-page main
{
display: table;
padding: 20px;
width: 88%;
border: 8px solid #FFF;
margin: 20px;
}

body#home-page main div
{
text-align: center;
margin: 0 auto;
vertical-align: middle;
width: 50%;
}

body#home-page main div p
{
font-size: 12px;
color:#FFF;
line-height: 1.4;
letter-spacing: 1px;
}

到目前为止我尝试过的事情包括:- 绝对定位内容。这将它推到了边界框之外,看起来很糟糕。- 设置高度将不起作用,因为这需要响应。

我认为此时我唯一的其他选择是通过 jQuery 捕获屏幕的高度,然后将 main 的高度设置为该高度。但在我这样做之前,我想知道是否有办法通过 CSS 来做到这一点

最佳答案

通过以下代码在 chrome 中实现垂直对齐

高度:100%;
显示: flex ;
对齐元素:居中;

对于 .main div,添加了 box-sizing: border-box; 以便我们可以使用 100% 宽度。

html, body 需要 100% 的高度。

这是更新的 fiddle - https://jsfiddle.net/afelixj/nuLyq28d/7/

请检查 chrome。

关于jquery - 将具有完整宽度/高度边框的 div 居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30534222/

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