gpt4 book ai didi

HTML/CSS 居中控件到屏幕

转载 作者:行者123 更新时间:2023-11-28 05:10:06 27 4
gpt4 key购买 nike

我对 ASP.Net 和任何真正与 Web 开发相关的东西都很陌生。看了几个视频,了解了基本概念。

我现在遇到的问题是我想将我的 View 置于页面中心。

作为示例,我在 vs2015 中创建了一个新的 ASP.Net MVC 元素。我创建了一个新 View ,我的 View 如下所示。

@{
ViewBag.Title = "Test Page";
}

<div>
<button>Click me</button
</div>

我希望按钮在水平和垂直方向都位于屏幕中央。我如何实现这一点?

我已经在网上查看并尝试了几乎所有我能找到的东西,但似乎没有任何效果。

编辑:完全归功于 Luke,他为我指明了正确的方向。

在位于 Content 文件夹的 Site.css 中,我添加了以下内容。

.centerStuff {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

现在我的 View 看起来像这样。

@{
ViewBag.Title = "Test Page";
}

<div class="centerStuff">
<button>Click me</button
</div>

最佳答案

您必须为容器指定高度。检查一下:

body{
position:relative;
height:100%;
}
.full-height{
text-align:center;
display:table;
height:300px;//this is just and example height
width:100%;
border:1px solid red;
}
.center{
display:table-cell;
vertical-align:middle;
height:100%;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>

<body>
<div class="full-height">
<div class="center">test</div>
</div>
</body>
</html>

要设置 .full-height div 的高度,您需要通过 javascript 获取窗口的高度,然后像这样设置它(下面的示例使用 jQuery):

var winHeight = window.innerHeight;//gets height of window
$('.full-height').css('height':winHeight+'px');//sets the div height

希望这有帮助吗?

关于HTML/CSS 居中控件到屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39618410/

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