个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
尝试将文本和骨架样板中的 img 居中。我的文本在页面中居中，但不在 div 中...我也希望图像横幅也居中。
提前感谢您提供的任何帮助、指导或提示。着陆页位于 http://www.forensicfilesnow.com
骨架的代码也可以在这里找到(http://getskeleton.com)。不想复制整个 CSS 页面，因为它会很长，而且有很多不必要的样式，我什至没有使用。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Forensic Files Now</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="//fonts.googleapis.com/css?family=Special+Elite:400,300,600" rel="stylesheet" type="text/css">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container" style="text-align:center;">
<div class="row">
<div class="one-third column"> </div>
<div class="one-third column" style="margin-top: 5%">
<h4>Coming Soon...</h4>
<p>Your new home for Forensic Files fans, backstories, and questions and more.</p>
<img id="ffnowbanner" src="images/forensicfilesnow-banner.png" alt="Trulli" width="450" height="600">
</div>
<div class="one-third column"> </div>
</div>
</div>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>
最佳答案
这是你的主要 div，需要居中...
<div class="one-third column" style="margin-top: 5%">
<h4>Coming Soon...</h4>
<p>Your new home for Forensic Files fans, backstories, and questions and more.</p>
<img id="ffnowbanner" src="images/forensicfilesnow-banner.png" alt="Trulli" width="450" height="600">
</div>
您可以编辑它的样式并调整位置和边距(仅举个例子，您可以更改数字):
<div class="one-third column" style="margin-top: 5%; position: absolute; margin-left: 40%; width: 20%">
——position:absolute；使您的 div 与其他元素“独立”，同时使用边距。
— 左边距:40%；使其从屏幕左侧设置字段 40%...
— 它自己的宽度:20%，剩余的 40% - 将留在右侧。
你也可以设置 margin-left: 123px;玩像素。但它会在您的屏幕上运行，并且可能会在其他屏幕上失败，该屏幕可能更大或更小。百分比效果更好。
关于html - 在 Skeleton Boilerplate 中居中 IMG 和文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52123885/
25
4
0
我是一名优秀的程序员,十分优秀！