gpt4 book ai didi

html - 垂直 div float 在页面左侧中间

转载 作者:行者123 更新时间:2023-11-28 03:04:31 25 4
gpt4 key购买 nike

如何让一个 div float 在整个页面的左侧并始终位于垂直中间的左侧?

我的 html 代码很简单:

<body>
<div class="num_book">
<img src="imgs\PhoneDir.png" alt="phone dir" height="142.2" width="45.6">
</div>
</body>

到目前为止,我的 CSS 是:

.num_book {
float: left;
}

我已经在我的 CSS 中尝试过:position、margin、padding、display、vertical-align 但没有成功,任何想法?

最佳答案

我会这样做,使用 flexbox :

.wrapper {
/* vertical bar on left side */
height: 100%;
left: 0;
position: fixed;
top: 0;

/* align items inside vertically centered */
align-items: center;
display: flex;
}
.centered {
background-color: red;
}
<div class="wrapper">
<div class="centered">Hello!</div>
</div>

.wrapper 是左侧固定的(see position)竖条,里面的.centered 垂直居中对齐(见显示:flexalign-items )。

关于html - 垂直 div float 在页面左侧中间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46013687/

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