使用CSS将HTML内容居中
[英]Center html content with css
问题描述
我正在为自己构建一个WIP占位符页面，并且一直坚持使用CSS将媒体内容居中。 我设法使其可以在移动设备上工作，但其内容在桌面设备上稍微偏右。
更新：我已经添加了完整的代码以及为支持它而选择的CSS。 如您所知，CSS的.display部分是我最麻烦的地方（假设我已经对此进行了麻烦）。 从我在这里告诉我的内容和在其他地方阅读过的内容来看，我最初在HTML中尝试过的标签不适用于HTML5，因此我希望获得CSS来完成它。 就像我之前提到的，在移动设备上进行预览时，它可以正常工作，并且页面底部的链接可以很好地堆叠，但是在完整的桌面环境中，它们全都崩溃了。
这是下面的代码：
@charset "utf-8"; /* CSS Document */ .content { max-width: 500px; margin: auto; } .display{ position:relative; display: block; padding: 0; margin:0 auto; width: auto; text-align:center; display:flex; justify-content:center; } .button { background-color: #FFFFFF; border: #000000; border-bottom-width: 2px; text-decoration-color: #FFFFFF; padding: 15px 32px; text-align: center; display: inline-block; font-size: 16px; } .help-block.with-errors { color: #ff0000; margin-top: 5px; } .overlay { position:fixed; top:0; left:0; right:0; bottom:0; background-color:rgba(0, 0, 0, 0.8); z-index:100; color:white; display: none; font-family: 'source_sans_proregular'; line-height: 25px; -webkit-text-size-adjust:none; text-size-adjust:none; } .container { width:100%; height:100%; margin:0; padding:0; border:0; } .container td { vertical-align: middle; text-align: center; } .centerAlign { text-align: center; } .margin2x { margin-bottom: 24px; } .margin1x { margin-bottom: 12px; }
<!doctype html> <html> <head> <meta charset="utf-8"> <title>mAdjetey is getting an upgrade</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="index_files/mine.css" rel="stylesheet" type="text/css"> <link rel="shortcut icon" href="index_files/favicon.png"> </head> <a name="tepin"></a> <div class="display" align="center"> <img src="index_files/uc_main.png" style="max-width:100%" height="auto" alt="Website under redesign"> </div> <div class="display"> <div class="w3-topbar"> <a href="email.html"><img src="index_files/icon_email.png" alt="Email"></a> </div> </div> <div class="display" align="center"> <a href="#tepin" class="button">Back to top of page</a> </div> </html>
2 个解决方案
解决方案1
0 2018-05-30 13:08:31
有几种方法，但是在此示例中，我对图像应用了“ display：block”，以便它可以使用margin属性。
/* CSS */
.display img {
display: block;
padding: 0;
/* maybe some top margin too? margin: 30% auto 0 */
margin: 0 auto;
width: auto;
}
<!-- HTML -->
<div class="display" align="center">
<img src="index_files/uc_main.png" style="max-width:100%" height="auto" alt="Website under redesign">
</div>
解决方案2
0 2018-05-30 13:20:31
HTML5不支持align属性。 改用CSS。
.className{
text-align:center
}
或者您可以随时使用display flex
.className{
display:flex;
justify-content:center
}
面板内的HTML / CSS中心内容-包括JSFiddle
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.